【CSS】Pure CSSで実装されたイメージスライダーCSS Slider

CSS SliderはPure CSSで実装されたイメージスライダー。

HTML

<div id="slider">
<div>
<img src="img/4.jpg" alt="">
</div>
<div>
<img src="img/3.jpg" alt="">
</div>
<div>
<img src="img/2.jpg" alt="">
</div>
<div>
<img src="img/1.jpg" alt="">
</div>
</div>

CSS

div#slider {
overflow: hidden;
margin: auto;
width: 50%;
max-width: 700px;
max-height: 400px;
}
div#slider div {
position: relative;
width: 500%;
margin: 0;
left: 0;
font-size: 0;
animation: 20s slider infinite;
}
div#slider div img {
width: 20%;
float: left;
}
@keyframes slider {
0% {
left: 0%;
}
20% {
left: 0%;
}
25% {
left: -100%;
}
45% {
left: -100%;
}
50% {
left: -200%;
}
70% {
left: -200%;
}
75% {
left: -300%;
}
95% {
left: -300%;
}
}
 
CSS Slider

【CSS】Pure CSSで実装されたイメージスライダーCSS Slider

  • LATEST
  • RELATED
  • POPULAR