CSS

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

October 2, 2016
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%;
  }
}