スライドショーの自動再生を実装する場合、ユーザーがマウスカーソルをスライド上に移動させたときにスライドショーを一時停止する機能が必要となることがあります。Splide.jsでは、この機能を簡単に実装することができます。
まず、Splide.jsの初期化コードを設定します。以下の例では、splide
というIDを持つ要素をスライドコンテナとして使用しています。
new Splide('#splide').mount();
次に、マウスホバー時にスライドショーを一時停止するために必要なイベントリスナーを追加します。以下のコードは、マウスがスライド上に乗った時にスライドショーを一時停止し、マウスがスライドから離れた時に再開する処理を行います。
const splideElement = document.querySelector('#splide');
const splideInstance = Splide.splides[0]; // Splideインスタンスを取得
splideElement.addEventListener('mouseover', () => {
splideInstance.pause(); // スライドショーを一時停止
});
splideElement.addEventListener('mouseout', () => {
splideInstance.play(); // スライドショーを再開
});
上記のコードでは、splideElement
にマウスホバーイベントリスナーを追加し、splideInstance
を使用してSplide.jsのスライドショーインスタンスを取得しています。mouseover
イベントが発生した場合にはpause()
メソッドを呼び出してスライドショーを一時停止し、mouseout
イベントが発生した場合にはplay()
メソッドを呼び出してスライドショーを再開します。
以上で、Splide.jsを使用してマウスホバー時にスライドショーを一時停止する方法が解説されました。この方法を利用することで、ユーザーがスライド上でマウス操作を行うとスライドショーが一時停止し、スムーズな操作が可能になります。