画像をCSSアニメーションを使って自動でスライドさせることが出来たので、備忘録として残すことにします。
画像をCSSアニメーションを使って自動でスライドさせる方法
HTML
<h2>無限スクロール</h2>
<div class="slider">
<ul class="slide-show">
<li class="content">
<img src="https://yujiromx.com/wp-content/uploads/2022/01/1.jpg" alt="">
</li>
<li class="content">
<img src="https://yujiromx.com/wp-content/uploads/2022/01/1.jpg" alt="">
</li>
<li class="content">
<img src="https://yujiromx.com/wp-content/uploads/2022/01/1.jpg" alt="">
</li>
<li class="content">
<img src="https://yujiromx.com/wp-content/uploads/2022/01/1.jpg" alt="">
</li>
</ul>
<ul class="slide-show">
<li class="content">
<img src="https://yujiromx.com/wp-content/uploads/2022/01/1.jpg" alt="">
</li>
<li class="content">
<img src="https://yujiromx.com/wp-content/uploads/2022/01/1.jpg" alt="">
</li>
<li class="content">
<img src="https://yujiromx.com/wp-content/uploads/2022/01/1.jpg" alt="">
</li>
<li class="content">
<img src="https://yujiromx.com/wp-content/uploads/2022/01/1.jpg" alt="">
</li>
</ul>
<ul class="slide-show">
<li class="content">
<img src="https://yujiromx.com/wp-content/uploads/2022/01/1.jpg" alt="">
</li>
<li class="content">
<img src="https://yujiromx.com/wp-content/uploads/2022/01/1.jpg" alt="">
</li>
<li class="content">
<img src="https://yujiromx.com/wp-content/uploads/2022/01/1.jpg" alt="">
</li>
<li class="content">
<img src="https://yujiromx.com/wp-content/uploads/2022/01/1.jpg" alt="">
</li>
</ul>
</div>
<h2>無限スクロール（ホバーしたらストップする）</h2>
<div class="slider slide-paused" ontouchstart="">
<ul class="slide-show">
<li class="content">
<img src="https://yujiromx.com/wp-content/uploads/2022/01/1.jpg" alt="">
</li>
<li class="content">
<img src="https://yujiromx.com/wp-content/uploads/2022/01/1.jpg" alt="">
</li>
<li class="content">
<img src="https://yujiromx.com/wp-content/uploads/2022/01/1.jpg" alt="">
</li>
<li class="content">
<img src="https://yujiromx.com/wp-content/uploads/2022/01/1.jpg" alt="">
</li>
</ul>
<ul class="slide-show">
<li class="content">
<img src="https://yujiromx.com/wp-content/uploads/2022/01/1.jpg" alt="">
</li>
<li class="content">
<img src="https://yujiromx.com/wp-content/uploads/2022/01/1.jpg" alt="">
</li>
<li class="content">
<img src="https://yujiromx.com/wp-content/uploads/2022/01/1.jpg" alt="">
</li>
<li class="content">
<img src="https://yujiromx.com/wp-content/uploads/2022/01/1.jpg" alt="">
</li>
</ul>
<ul class="slide-show">
<li class="content">
<img src="https://yujiromx.com/wp-content/uploads/2022/01/1.jpg" alt="">
</li>
<li class="content">
<img src="https://yujiromx.com/wp-content/uploads/2022/01/1.jpg" alt="">
</li>
<li class="content">
<img src="https://yujiromx.com/wp-content/uploads/2022/01/1.jpg" alt="">
</li>
<li class="content">
<img src="https://yujiromx.com/wp-content/uploads/2022/01/1.jpg" alt="">
</li>
</ul>
</div>
ulタグを３つ用意する理由は、横に自動スライドした際にulタグが１つだど自動スライドが途中で切れてしまうからです。
CSS
body {
padding: 50px 20px;
}
h2 {
margin-bottom: 30px;
}
.content {
width: 33.333vw;
margin: 0 2.604vw;
}
.slider {
overflow: hidden;
display: flex;
align-items: center;
margin-bottom: 100px;
}
.slide-show {
display: flex;
justify-content: left;
-webkit-animation: loop 20s infinite linear 1s both;
animation: loop 20s infinite linear 1s both;
}
/* loopのアニメーション */
@-webkit-keyframes loop {
from {
transform: translateX(0);
}
to {
transform: translateX(-100%);
}
}
@keyframes loop {
from {
transform: translateX(0);
}
to {
transform: translateX(-100%);
}
}
/* 画像をhoverした時にストップさせる */
.slide-paused:hover .slide-show {
-webkit-animation-play-state: paused;
animation-play-state: paused;
}ぽ
ポイントはCSSアニメーションの指定と、画像をhoverした際にストップさせる実装です。
まとめ
以上が、画像をCSSアニメーションを使って自動でスライドさせる方法です。
