Splideの基本的な使い方
これまでSwiperをメインに使用してきましたが、より自分の制作環境に合ったスライダーを発見したので覚書としてポストします。
軽量かつ多機能。動きもスムーズで今後メインで使いそうな予感のSplideです！
個人的に脱jqueryは特段意識してませんがSwiper同様ライブラリを選ばないというところも良いのではないでしょうか。
一番ポイントが高かったのは、
『スローで自動スクロールしつつナビゲーションとページネーションでスライド送りができる』
ところです。
これができるスライダーって以外と少ないんですよね。
ここでは最低限の使い方だけご紹介しますが。
その他の機能等、詳しくは本家サイトでご確認を。
本家サイト
読み込み
|
1 2 |
<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/@splidejs/splide@4.0.7/dist/css/splide-core.min.css"> <script src="//cdn.jsdelivr.net/npm/@splidejs/splide@4.0.7/dist/js/splide.min.js"></script> |
HTML
|
1 2 3 4 5 6 7 8 9 |
<section class="splide" aria-label="Splideの基本的なHTML"> <div class="splide__track"> <ul class="splide__list"> <li class="splide__slide">Slide 01</li> <li class="splide__slide">Slide 02</li> <li class="splide__slide">Slide 03</li> </ul> </div> </section> |
JS
|
1 2 3 4 5 6 |
<script> document.addEventListener( 'DOMContentLoaded', function() { var splide = new Splide( '.splide' ); splide.mount(); } ); </script> |
