Google今日は最新のJavaScriptスライダー[Splide]を紹介します。[Splide.js]の特徴をいくつかピックアップします。jQueryなどのライブラリに依存せず単体で動く軽量(圧縮版で11kB)IE10以降対応ブレイクポイントの指定でレスポンシブ対応マウスのドラッグとタッチスワイプに対応SEOフレンドリースライダー、またはスライドショー、カルーセルに必要とされる要素はすべて揃っており、近年評価が高い[swiper.js]や[slick.js]などと肩を並べられるスペックです。https://splidejs.com目次[Splide]本体ファイルをインストール1.NPMの場合2.CDNを利用する場合3.Githubからダウンロードする場合HTMLSplideの初期化オプション設定の設定方法JavaScriptでオプション指定データ属性でオプションを指定[Splide.js]のオプション一覧オプション設定サンプル[Splide]本体ファイルをインストールSplide.jsをウェブサイトにインストールする方法は3つあります。@splidejs/splideこちらは適宜webpack等でコンパイルしてください。src="https://cdn.jsdelivr.net/npm/@splidejs/splide@latest/dist/js/splide.min.js"></script>上記のコードをHTMLの任意の場所で読み込んでください。公式のGithubからダウンロード可能です。Zip」でファイル一式をダウンロードできます。ZIPファイルを展開するといくつかのフォルダとファイルが梱包されていますが、使用するのは「splide.min.css」と「splide.min.js」になります。この2つのファイルは<head>〜</head>内、またはHTMLの適当な場所で読み込んでおきましょう。HTMLSplideの基本的なマークアップは以下のとおり。03</li></ul></div></div>.splide__slideが付与された各スライドの中に、画像やテキストなどの任意のコンテンツを入れることができます。記述したHTMLに対してSplideを適用します。).mount();</script>ちなみにheadタグ内で初期化を行うなど、対象となる要素がロードされていない段階で初期化の処理を記述する場合、次のようにしてロードタイミングを監視しします。splide.mount();});</script>記述したHTMLをまとめると次のようになります。).mount();</script></body></html>以上で最低限は動くようになります。サンプルを用意したのでご確認ください。オンズのサンプルオプション設定の設定方法Splide.jsには多くのオプションが用意されています。JavaScriptでオプション指定オプション設定は次のように行います。3,}).mount();</script>データ属性でオプションを指定data-splide属性を使って、HTMLでオプションを指定することも可能です。このとき、属性の値はJSONフォーマットで指定します。data-splide='{"type":"loop","perPage":3}'>...<div/div>JSON内でダブルクォートを使用するため、上記の例では属性の値をシングルクォートで囲っています。"によりJSONの値をエスケープすれば、属性にダブルクォートを用いることもできます。内容typeスライダーのタイプ:「slide」「loop」「fade」から指定rewindスライダーの終わりまで行ったときに、先頭に巻き戻すspeedスライダーの移動速度をミリ秒単位で指定(0を指定するとアニメーションなしで直接対象に遷移する)rewindSpeedrewindで巻き戻すときの移動速度をミリ秒単位で指定widthスライダーの最大幅を設定。remや%などの相対単位を指定することも可能heightスライダーの高さを設定。%を除き、remなどの相対単位を指定することも可能fixedWidthスライドの幅を固定。remや%などの相対単位を指定することも可能fixedHeightスライドの高さを固定。%を除き、remなどの相対単位を指定することも可能heightRatioスライドの高さを幅に対する割合で指定autoWidth有効にすると、それぞれのスライドの幅をそのまま使用autoHeight有効にすると、それぞれのスライドの高さをそのまま使用start最初にアクティブになるスライドのインデックスを指定perPage1ページに何枚のスライドを表示するかを指定perMove1度の移動で、何枚のスライドを移動するかを指定clones明示的にクローンスライドの枚数を指定cloneStatusis-activeクラスをクローンにも追加するかどうかを決定focus複数スライドがある場合、どのスライドをアクティブにするかを指定gapスライド間の余白を指定。CSSの相対単位を指定することも可能paddingスライダーの左右、あるいは上下の余白を指定。CSSの相対単位を指定することも可能arrows矢印ボタンを表示するかどうかを指定paginationページネーションを表示するかどうかを指定easingCSSトランジションに使用するタイミング関数を指定easingFuncフリードラッグモードなどで使用する補間関数を指定dragドラッグ操作でスライダーを動かせるかどうかを指定noDragセレクタでドラッグできない要素を指定dragMinThresholdドラッグとみなされる最小移動距離を指定flickPowerフリックしたに際どのくらいの距離を移動するかを指定するflickMaxPagesフリックにより移動できる最大ページ数を指定waitForTransitionスライダーが移動中にも操作を受け付けるかどうかを指定arrowPath矢印に使われるSVGのパス。すぎる設定項目が用意されていますね。これだけオプションがあれば自由自在にスライダーを設定できそうです。オプション設定サンプル以下、オプションの中からいくつかをピックアップした設定のサンプルを紹介します。true,},}}).mount();</script>ちなみに本プラグイン開発者は日本人のエンジニアの方。公式ドキュメントが完全に日本語に対応しているので英語が苦手な初心者ウェブデザイナーにもオススメできます。実際のデモも多数用意されています。Splide:https://splidejs.com最後に。JavaScriptについて学ぶならコチラの書籍がオススメです。2015年5月に株式会社オンズを設立。https://on-ze.comこちらの記事もいかがですか?アナタにオススメ!同じカテゴリーの他の記事です。【JavaScript】リンクの元のページに戻る、ブラウザの「戻る」ボタンと同じ動作。API】外部サイトのRSS情報を取得して表示させる方法。