Blog

HOME > Web > javascript > 簡単に実装できるスライダー「Splide」

簡単に実装できるスライダー「Splide」

2022/11/13

javascript JQuery

備忘録です。

以前、制作したサイトでスライダーが動かないという修正依頼がありました。
たまたまかもしれませんが、よく使っているBoxSliderの調子が悪いことがありまして、代わりに使えるスライダーを探していたところ見つけたのが「Splide」です。

Splideサイト
https://ja.splidejs.com/

実装は簡単です。

Splideからダウンロード

任意のディレクトリーからjsを読み込み
<script src="path-to-the-file/splide.min.js"></script>

スタイルシート
<!-- サーバに置いたファイルを参照 -->
<link rel="stylesheet" href="path-to-the-file/splide.min.css">

<!-- またはCDN上のファイルを参照 -->
<link rel="stylesheet" href="url-to-cdn/splide.min.css">

基本的なHTML

<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>

Splideの適用

<script>
  new Splide( '.splide' ).mount();
</script>

オプションの変更方法

<script>
new Splide( '.splide', {
  type   : 'loop',
  perPage: 3,
} );
</script>

オプション

type
スライダーのタイプ
role
ルート要素のroleを指定
label
ルート要素のaria-labelを指定
labelledby
ルート要素のaria-labelledbyを指定
rewind
スライダーの終わりまで行ったときに、先頭に巻き戻せるかどうかを決定
speed
スライダーの移動時間をミリ秒単位で指定
rewindSpeed
巻き戻す際の移動時間をミリ秒単位で指定
rewindByDrag
ドラッグやスワイプでもスライダーを巻き戻すかどうかを決定
width
スライダーの最大幅を設定。remや%などの相対単位を指定することも可能
height
スライダーの高さを設定。%を除き、remなどの相対単位を指定することも可能
fixedWidth
スライドの幅を固定。remや%などの相対単位を指定することも可能
fixedHeight
スライドの高さを固定。%を除き、remなどの相対単位を指定することも可能
heightRatio
スライドの高さを、幅に対する割合で指定
autoWidth
有効にすると、それぞれのスライドの幅をそのまま使用
autoHeight
有効にすると、それぞれのスライドの高さをそのまま使用
start
最初にアクティブになるスライドのインデックスを指定
perPage
1ページに何枚のスライドを表示するかを指定
perMove
1度の移動で、何枚のスライドを移動するかを指定
clones
明示的にクローンスライドの枚数を指定
cloneStatus
is-activeクラスをクローンにも追加するかどうかを決定
focus
複数スライドがある場合、どのスライドをアクティブにするかを指定
gap
スライド間の余白を指定。CSSの相対単位を指定することも可能。
padding
スライダーの左右、あるいは上下の余白を指定。CSSの相対単位を指定することも可能
arrows
矢印ボタンを表示するかどうかを決定
pagination
ページネーションを表示するかどうかを決定
paginationKeyboard
ページネーション専用のキーボードショートカットを有効にするかどうかを決定
paginationDirection
明示的にページネーションの方向を指定
easing
CSSトランジションに使用するタイミング関数を指定
easingFunc
フリードラッグモードなどで使用する補間関数を指定
drag
ドラッグによりスライダーを動かせるかどうかを決定
snap
フリードラッグモードでも、近くのスライドにスナップするかどうかを決定
noDrag
セレクタにより、ドラッグできない要素を指定
dragMinThreshold
ドラッグとみなされる最小移動距離を指定
flickPower
フリックした際どのくらいの距離を移動するか決定するためのパラメータ
flickMaxPages
フリックにより移動できる最大ページ数を指定
waitForTransition
スライダーが移動中にも操作を受け付けるかどうかを決定
arrowPath
矢印に使われるSVGのパス。例えば、'm7.61 0.807-2.12...'
autoplay
自動再生を有効にするかどうかを決定
interval
自動再生の間隔をミリ秒単位で指定
pauseOnHover
マウスオーバーしたときに自動再生を停止するかどうかを決定
pauseOnFocus
スライダー内にフォーカスされたエレメントがある場合、自動再生を停止するかどうかを決定
resetProgress
自動再生が中断されたのち再開する際、それまでの経過時間を維持するか破棄するかを決定
lazyLoad
遅延読み込みを有効化するかどうかを決定
preloadPages
遅延読み込みの際、事前に何ページ分読み込むかを指定
keyboard
キーボード操作を有効にするかどうかを決定
wheel
マウスホイールによるスライダーの移動を有効にするかどうかを決定
wheelMinThreshold
慣性スクロールなどによる微小な移動量を無視するための閾値
wheelSleep
次のホイールインプットを受け付けるまでのスリープ時間をミリ秒で指定
releaseWheel
最初、あるいは最後のスライドに到達したとき、ホイールをページスクロールのために解放するかどうかを決定
direction
スライダーの方向を指定
cover
画像のsrcをその親要素のbackground-imageに変換するかどうかを決定
slideFocus
見えているスライドに対してtabindex="0"を追加するかどうかを決定
focusableNodes
スライドの中にあるフォーカス可能な要素を取得するためのセレクタ
isNavigation
ほかのスライダーのナビゲーションとして、それぞれのスライドをクリック可能にするかどうかを決定
trimSpace
focus optionを有効にした際に現れる余白を取り除くかどうかを決定
omitEnd
スライダーが最後のページに到達した際矢印を無効化し、ページネーションのボタンを最低限にするかどうかを決定（^4.1.0）
updateOnMove
is-activeクラスを移動前に更新するかどうかを決定
mediaQuery
ブレークポイントにmin-width、max-widthのどちらを使うかを指定
live
ライブリージョンを有効にするかどうかを決定
breakpoints
各ブレークポイントにおけるオプションの集合
reducedMotion
(prefers-reduced-motion: reduce)を検出した際に使用されるオプション
classes
クラス名を追加するためのオブジェクト
i18n
ローカライズ用のテキストを変更するためのオブジェクト
destroy
スライダーを破棄するかどうかを決定

ゼヒトモ内でのプロフィール: ROCKSTREAM, ゼヒトモのホームページ作成・制作サービス, 仕事をお願いしたい依頼者と様々な「プロ」をつなぐサービス

カテゴリー

月間アーカイブ

«前の記事

一覧に戻る

次の記事»

最近の投稿

人気の記事

MORE

ミュージシャンズ・プラザ

神社仏閣ホームーページ制作

ホームページ制作問合せ