Skip to content

Instantly share code, notes, and snippets.

@antonio-abrantes

antonio-abrantes/SlideshowCss.html

Created July 12, 2018 19:00
Show Gist options
  • Save antonio-abrantes/a5bf5024f2da10fe832b0c0845c8f658 to your computer and use it in GitHub Desktop.
Save antonio-abrantes/a5bf5024f2da10fe832b0c0845c8f658 to your computer and use it in GitHub Desktop.
Download ZIP
Exemplo de implementação de Slideshow apenas com CSS
Raw
SlideshowCss.html
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Slideshow com CSS</title>
<style>
body{
text-align: center;
}
.slide-indicators-container{
margin-top: 280px;
width: 100%;
position: absolute;
z-index: 3;
}
.slide-controller{
display: none;
}
.slide-indicator{
width: 15px;
height: 15px;
border-radius: 15px;
background-color: #526279;
display: inline-flex;
opacity: 0.8;
cursor: pointer;
}
.slide-show{
overflow: hidden;
}
.slides-list{
list-style-type: none;
margin: 10px 0;
padding: 0;
display: grid;
grid-auto-flow: column;
grid-auto-columns: 1fr;
--total-items: 4;
width: calc(var(--total-items) * 100%);
--selected-item: 0;
position: relative;
left: calc(var(--selected-item) * -100%);
transition: left 0.4s cubic-bezier(0.680, -0.100, 0.265, 0.100);
}
.slide-controller:nth-child(1):checked ~ .slide-show .slides-list{--selected-item: 0;}
.slide-controller:nth-child(2):checked ~ .slide-show .slides-list{--selected-item: 1;}
.slide-controller:nth-child(3):checked ~ .slide-show .slides-list{--selected-item: 2;}
.slide-controller:nth-child(4):checked ~ .slide-show .slides-list{--selected-item: 3;}
</style>
</head>
<body>
<div class="slide">
<div class="slide-indicators-container">
<label class="slide-indicator" for="slide-1"></label>
<label class="slide-indicator" for="slide-2"></label>
<label class="slide-indicator" for="slide-3"></label>
<label class="slide-indicator" for="slide-4"></label>
</div>
<input type="radio" class="slide-controller" id="slide-1" name="slide" checked />
<input type="radio" class="slide-controller" id="slide-2" name="slide" />
<input type="radio" class="slide-controller" id="slide-3" name="slide" />
<input type="radio" class="slide-controller" id="slide-4" name="slide" />
<div class="slide-show">
<ul class="slides-list" >
<li class="slide" >
<img src="https://picsum.photos/300/300?image=8" />
</li>
<li class="slide" >
<img src="https://picsum.photos/300/300?image=0" />
</li>
<li class="slide" >
<img src="https://picsum.photos/300/300?image=6" />
</li>
<li class="slide" >
<img src="https://picsum.photos/300/300?image=1" />
</li>
</ul>
</div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment