スライドの表現として、無限カルーセル（無限スライド、無限スクロール）があります。
そんな無限カルーセルですが、アクセシビリティの観点から、一時停止が必要な時があります。
slick.jsやswiper.jsを利用されている方で、無限カルーセルの一時停止が
「ホバーした瞬間に一時停止」「途中でも止まるようにしたい」がうまくできないと思っている方もいるのではないでしょうか？
今回は、slick.js,swiper.js,splide.jsの比較と、実装方法を解説します。
slick.js
slick.jsは歴史が長くオプションが豊富です。
jQuery依存ですが、HTML、javascriptの設定が初心者でも簡単で、人気のライブラリになります。
slick.jsでは、pauseOnHoverをtrueにすることで、一時停止が可能になります。デフォルトで、”pauseOnHover”: true であるため、設定をfalseにしない限りは一時停止となります。
ただ、slick.jsでは、スライドの停止位置が決まっており、スライド開始地点にまで動かないと停止しないようになっていますので、無限カルーセルの途中で停止することが難しいようです。
<script>
$(document).ready(function(){
$('.slider').slick({
"arrows": true,
"dots": true,
"infinite": true,
"pauseOnHover": true,
"speed": 5000,
"slidesToShow": 1,
"slidesToScroll": 1,
"centerMode": false,
"variableWidth": false,
"autoplay": true,
"autoplaySpeed": 0,
"cssEase": "linear"
});
});
</script>Swiper.js
vanilla JSでjquery不要な分、動作が軽く、モバイルでの操作性が良く、アクセシビリティの面でも問題なく対応が可能です。
しかし、slick.jsよりは設定が少し複雑なライブラリになります。
swiper.jsでは、pauseOnMouseEnterをtrueにすることで、slick.jsと同じような一時停止は可能です。
また、javascriptでカスタムすることで、ホバーした瞬間に一時停止することも可能になります。
◆参考：きまぐれテック備忘録-【swiper.js】一定速度で流れ続けるスライドショーをホバー時に一時停止する方法
<script>
(function() {
(function() {
const SPEED = 5000; // 全体の速度
const swiperElement = document.querySelector('.swiper');
const mySwiper = new Swiper('.swiper', {
loop: true,
slidesPerView: 'auto',
speed: SPEED,
allowTouchMove: false,
autoplay: {
delay: 0,
disableOnInteraction: false,
},
});
swiperElement.addEventListener('mouseenter', () => {
mySwiper.autoplay.stop();
// 現在位置で固定
mySwiper.setTransition(0);
mySwiper.setTranslate(mySwiper.getTranslate());
});
swiperElement.addEventListener('mouseleave', () => {
// 1. 現在の座標を取得
const currentTranslate = mySwiper.getTranslate();
// 2. 次の「キリの良い位置」までの必要情報を計算
// slides[1]の座標からスライド1枚分の幅を算出
const slideSize = mySwiper.slides[0].swiperSlideSize + mySwiper.params.spaceBetween;
// 3. 現在地から次のスライド端までの「残りの距離」を計算
const progress = (Math.abs(currentTranslate) % slideSize) / slideSize;
const remainingTime = SPEED * (1 - progress);
// 4. 残りの時間で次の位置までアニメーションさせ、autoplayを再開
mySwiper.setTransition(remainingTime);
mySwiper.setTranslate(currentTranslate - (slideSize * (1 - progress)));
// アニメーション完了後にautoplayを正規の速度で再開させる
setTimeout(() => {
mySwiper.autoplay.start();
}, remainingTime);
});
})();
})();
</script>splide.js
vanilla JSでjquery不要な分、動作が軽く、ライブラリとしても3つの中で最も軽量です。
しかし、オプションの数はswiper.jsよりは少ないため、パフォーマンス重視のライブラリになります。
splide.jsでは、”pauseOnHover”: trueで一時停止が可能です。デフォルトのオプションでありながら、ホバーした瞬間に一時停止が可能であり、すぐに思ったような動作の実装ができました。
また、pauseOnHoverはデフォルトでtrueなので、この記述を省いても実装は可能なようです。
<script>
document.addEventListener( 'DOMContentLoaded', function() {
var splide = new Splide( '#splide', {
"type": "loop",
"direction": "ltr",
"perPage": 1,
"perMove": 1,
"arrows": true,
"pagination": true,
"drag": true,
"wheel": false,
"speed": 400,
"trimSpace": false,
"focus": "center",
"autoScroll": {
"speed": 2,
"pauseOnHover": true,
"pauseOnFocus": true,
}
});
splide.mount( window.splide.Extensions );
});
</script>まとめ
無限カルーセルにおいて、3つのスライダーライブラリの、アクセシビリティ対応に必要な一時停止の機能を比べてみました。
- slick.jsはホバーした瞬間に一時停止が難しい。
- swiper.jsはデフォルトでは難しく、javascriptでカスタマイズが必要。
- splide.jsはデフォルトの設定で可能。
私としては、ライブラリの容量の軽さも相まってsplide.jsが一押しになりそうです！
▼3つのスライダーの比較
スライドショーライブラリSlick,Swiper,Splideの比較
▼3つのスライダーをプレビューを見ながら実装できるツール
スライダー生成ツール（slick.js）
スライダー生成ツール（swiper.js）
スライダー生成ツール（splide.js）