スライダーライブラリのSplide (スプライド)で「1つのスライダーに複数のスライドを表示させる方法」
この動画では、軽量で高機能なスライダーライブラリ「Splide (スプライド)」の基本的な使い方から、さらに応用的な設定方法までを解説しています。前回の動画では、Splide の基本的な読み込み方法や HTML 構造について説明しましたが、今回は 「1ページに複数のスライドを表示させる方法」 を中心に解説しています。
具体的には以下のオプションについて説明しています。
・perPage:一度に表示するスライド数を指定できます。例えば、perPage: 3 にすると3つのスライドが同時に表示されます。
・perMove: スライドを1回の操作で何個ずつ動かすかを指定できます。例えば perMove: 1 にすると、1つずつスライドが動くようになります。
・type(slide, loop, fade)
・rewind
動画を見ながら実際にコードを書いて試すことで、Splide の動作を理解しやすくなります。次回の動画ではさらに細かい設定やアニメーションのカスタマイズについて解説する予定ですので、興味がある方はチェックしてください。
この動画はシリーズになっていて、下記動画リストで他のSplideの動画を視聴することができます。
https://factory-programming-mv.com/playlistDetails/PLv7E5OqNAIPyRciXnWSBjVE4_zEvN4LdQ/
具体的には以下のオプションについて説明しています。
・perPage:一度に表示するスライド数を指定できます。例えば、perPage: 3 にすると3つのスライドが同時に表示されます。
・perMove: スライドを1回の操作で何個ずつ動かすかを指定できます。例えば perMove: 1 にすると、1つずつスライドが動くようになります。
・type(slide, loop, fade)
・rewind
動画を見ながら実際にコードを書いて試すことで、Splide の動作を理解しやすくなります。次回の動画ではさらに細かい設定やアニメーションのカスタマイズについて解説する予定ですので、興味がある方はチェックしてください。
この動画はシリーズになっていて、下記動画リストで他のSplideの動画を視聴することができます。
https://factory-programming-mv.com/playlistDetails/PLv7E5OqNAIPyRciXnWSBjVE4_zEvN4LdQ/