昔、下の記事でSlick.jsを使った無限ループスライダーの実装方法を紹介しましたが、
この記事の方法はちょっと苦しいので、プラグインなしで実装する方法も紹介しています！
↓
ゆっくり流れる無限ループスライダー（逆方向も）
...
2018-09-18 20:00
いろいろ問題があるうえ逆向き（左から右）ができないということで、今回はプラグインなしでjQuery+CSSで実装する方法を紹介します。
こんな感じになります↓
それでは実装してみましょう。
html
|
1 2 3 4 5 6 7 8 9 |
<div class="slider"> <div class="slider__inner"> <div class="slider__item"><img src="https://meshikui.com/wp-content/uploads/2020/07/iphone8IMGL8205_TP_V.jpg" alt="" width="300"></div> <div class="slider__item"><img src="https://meshikui.com/wp-content/uploads/2020/07/200713.jpg" alt="" width="300"></div> <div class="slider__item"><img src="https://meshikui.com/wp-content/uploads/2020/07/200701.jpg" alt="" width="300"></div> <div class="slider__item"><img src="https://meshikui.com/wp-content/uploads/2020/05/blackmondayIMGL0444_TP_V.jpg" alt="" width="300"></div> <div class="slider__item"><img src="https://meshikui.com/wp-content/uploads/2020/04/200402.jpg" alt="" width="300"></div> </div> </div> |
jQuery
グループ一つではループできないので、jQueryで３つに分身させます。
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<script> $(function(){ $('.slider__inner').each(function(){ var sliderWidth = $(this).width(); $(this).clone(true).insertBefore(this); $(this).clone(true).insertAfter(this); $('.slider').css('width', sliderWidth*3); // 親要素の横幅を子要素の３倍にする }); }); </script> |
CSS
CSS Animationを使って動かします。
まずは、全てを横並びにしましょう。
|
1 2 3 4 5 6 |
.slider { display: flex; } .slider__inner { display: flex; } |
続いてアニメーションの部分。
右から左
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 |
.slider__inner:first-child { animation: loop 90s linear infinite; } .slider__inner:nth-child(2) { animation: loop2 90s -60s linear infinite; } .slider__inner:last-child { animation: loop3 90s -30s linear infinite; } @keyframes loop { 0% { transform: translateX(200%); } to { transform: translateX(-100%); } } @keyframes loop2 { 0% { transform: translateX(100%); } to { transform: translateX(-200%); } } @keyframes loop3 { 0% { transform: translateX(0%); } to { transform: translateX(-300%); } } |
２つめと３つめのグループのdulationを、speedの-1/3、-2/3にするのがポイント。
左から右
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 |
.slider__inner:first-child { animation: loop 90s linear infinite; } .slider__inner:nth-child(2) { animation: loop2 90s -60s linear infinite; } .slider__inner:last-child { animation: loop3 90s -30s linear infinite; } @keyframes loop { 0% { transform: translateX(-100%); } to { transform: translateX(200%); } } @keyframes loop2 { 0% { transform: translateX(-200%); } to { transform: translateX(100%); } } @keyframes loop3 { 0% { transform: translateX(-300%); } to { transform: translateX(0%); } } |
地味に需要があるかもしれない！最初ちょっと崩れるかもなぁってときは、ローディング画面にするか透明にしとくか、適当に隠しておきましょう。
現場からは以上です。
