夢みるゴリラ
夢みるゴリラ

画像を横方向に無限ループさせる

ホバーすると一時停止する

CSSで書くこと

/*
右から左へ
----------------------------*/
@keyframes infinity-scroll-left {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-100%);
  }
}
/*
左から右へ
----------------------------*/
@keyframes infinity-scroll-right {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(0%);
  }
}
/*
IE11対策
----------------------------*/
_:-ms-lang(x)::-ms-backdrop,
.d-demo {
  display: -ms-grid;
  overflow: hidden;
}
/*----------------------------*/
.d-demo__wrap {
  display: flex;
  overflow: hidden;
}

.d-demo__list {
  display: flex;
  list-style: none;
}

.d-demo__list--left{
animation :infinity-scroll-left 95s infinite linear 0.5s both;
}
.d-demo__list--right{
animation :infinity-scroll-right 95s infinite linear 0.5s both;
}

.d-demo__item {
  width: calc(100vw / 6);
}
.d-demo__item > img{
   width: 100%;
}

/*
マウスオーバーで一時停止させたい場合は以下
----------------------------*/

.d-demo__wrap:hover .d-demo__list--left {
  animation-play-state: paused;
}

HTMLで書くこと

横移動の無限スライドショーは以下。

  • d-demo__list--left … 右から左へ移動させる場合に使うクラス名
  • d-demo__list--right … 左から右へ移動させる場合に使うクラス名
<div class="d-demo">
   <div class="d-demo__wrap">
       <ul class="d-demo__list d-demo__list--left">
           <li class="d-demo__item"><img src="./images/test01.jpg" alt></li>
           <li class="d-demo__item"><img src="./images/test02.jpg" alt></li>
           <li class="d-demo__item"><img src="./images/test03.jpg" alt></li>
           <li class="d-demo__item"><img src="./images/test04.jpg" alt></li>
           <li class="d-demo__item"><img src="./images/test05.jpg" alt></li>
           <li class="d-demo__item"><img src="./images/test06.jpg" alt></li>
        </ul>
        <ul class="d-demo__list d-demo__list--left">
           <li class="d-demo__item"><img src="./images/test01.jpg" alt></li>
           <li class="d-demo__item"><img src="./images/test02.jpg" alt></li>
           <li class="d-demo__item"><img src="./images/test03.jpg" alt></li>
           <li class="d-demo__item"><img src="./images/test04.jpg" alt></li>
           <li class="d-demo__item"><img src="./images/test05.jpg" alt></li>
           <li class="d-demo__item"><img src="./images/test06.jpg" alt></li>
        </ul>
   </div>
</div>