画像を横方向に無限ループさせる
ホバーすると一時停止する
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>