LoginSignup
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

@5sick(Umino Shimako)

【祝！脱jQuery】Splideを使ってみよう vol.01

Posted at

おめでとう！jQueryから脱しました

皆さんこんにちは。ついにjQeuryからの脱却を果たしました。jQueryはjQueryで構文が初心者にもわかりやすいので、授業をする上では非常にありがたい存在だったのですが、授業のテキストがVanilla JSになりました。
そこで【Slick.js】からも卒業！【Splide】でスライダーを作成するミニ講座を作成いたします。

Splideってなあに

Splideは柔軟性に富み、軽量かつアクセシビリティに優れたスライダーライブラリです。オプションを変更するだけで、複数枚表示、サムネイル表示、縦方向に移動するスライダーなど、ありとあらゆるスライダーを簡単に作成することができます。

Splideより

つまり、めちゃ便利なスライダーライブラリですね。

スライダーライブラリには他にもSlick.js(jQuery)とかSwiper.jsがありますね。
筆者はSwiper.jsは触ったことがありません。
Slick.jsは少し前まで授業で使用していたので記事を書いています。
こちらのSplideについても、流れとしてはSlick.jsの記事を流用しようと考えています。

導入

早速導入から始めていきましょう。

ディレクトリ構造

.
└── index.html/
    ├── css/
    │   └── style.css
    │   └── reset.css(お好みで)
    ├── js/
    │   └── script.js
    └── img/
        ├── sample01.jpg
        ├── sample02.jpg
        └── sample03.jpg

今回、SplideはCDNで行こうと思うので、ディレクトリ構造としてはシンプル。
スライダー用に、数枚の画像を準備しておいてください。できれば縦長、横長などサイズ混合で準備できるとよいです。

CDNを読み込む

Splide - 基本的な使い方
Document>ユーザガイド>基本的な使い方にインストール方法が記載されています。
【CDNの利用】のjsDelivrをクリックすると、コピペできそうなコードが現れますので、JavaScriptとCSSをそれぞれindex.htmlの適切な場所に貼り付けましょう。
2025年7月現在、バージョンは4.1.4です。

image.png

ここではjsは</body>（bodyの終了タグ）のすぐ上に貼ることにします。

CSS,JavaScriptの読み込み順にも気をつけてください。大抵の場合、

  1. リセットCSS
  2. ライブラリのCSS(JavaScript)
  3. 自作のCSS(自作のJavaScript)

となります。

index.html
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Splideの使い方</title>
    <!-- リセットCSSはお好みのものを使用してください -->
    <link rel="stylesheet" href="./css/reset.css">
    <link href="
https://cdn.jsdelivr.net/npm/@splidejs/splide@4.1.4/dist/css/splide.min.css
" rel="stylesheet">
    <link rel="stylesheet" href="./css/style.css">
</head>
<body>


    <script src="
https://cdn.jsdelivr.net/npm/@splidejs/splide@4.1.4/dist/js/splide.min.js
"></script>
    <script src="./js/script.js"></script>
</body>
</html>

導入はこれで完了です。

最低限のコードを書く

それでは、splideを構成する最低限のコードを書いていきましょう。

第１回のコードは完全に公式サイトからの流用になります。
基本的な使い方に書いてあるので、そちらも併せてご覧ください。

HTML

この講座ではbodyタグの中身だけ書いていきます。

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

スライダーが主たるコンテンツである場合はsectionで、装飾目的の場合はdiv+role="group"でマークアップしてくださいとのことです。話は逸れますが、普段から全部divでマークアップしちゃう人はこのあたりのことも気をつけましょうね。
今回は、メインビジュアルを想定して作っていくのでsectionでマークアップします。

HTMLの詳しい構造については、Splide - Structureを見てください。

JS

bodyの終了タグの直前でscript.jsを読み込む前提で話を進めます。
script.js内に以下のコードを書いてください。

script.js
new Splide( '.splide' ).mount();

デモ

たったこれだけでスライダーが動く、動くぞ！

See the Pen my-Splide001 by yoruokamix (@yoruokamix) on CodePen.

画像スライダーにしてみる

今は文字がスライドしていると思いますが、画像に差し替えてみましょう。

コード

HTML

index.html
 <section class="splide" aria-label="メインビジュアル">
    <div class="splide__track">
        <ul class="splide__list">
            <li class="splide__slide"><img src="./img/sample01.jpg"></li>
            <li class="splide__slide"><img src="./img/sample02.jpg"></li>
            <li class="splide__slide"><img src="./img/sample03.jpg"></li>
        </ul>
    </div>
</section>

JS

変更なし

デモ

リセットCSSと準備した画像にもよると思いますが、横幅は表示領域いっぱい、高さは一番縦長の画像に合わせたスライダーができました。

See the Pen my-Splide002 by yoruokamix (@yoruokamix) on CodePen.

表示領域いっぱいに広がるスライダーの作成

さて、では今回の目標である、最近流行りの表示領域いっぱいに広がるメインビジュアル風のスライダーを作成してみたいと思います。
やることは大きく分けて２つです。

  • スライダーを表示領域いっぱいに表示する
  • スライダーの自動再生、無限ループさせる（最後まで行ったら最初のスライドに戻る）

スライダーを表示領域いっぱいに表示する

ここでSplideのオプションの使い方について説明しておきましょう。
Splideのオプション一覧はSplide - Optionに書いてあります。

書き方はこのようになります。

js
new Splide('.splide', {
    オプション : 値,
    オプション : 値,
    ...
}).mount();

では、widthオプションとheightオプションを使って、スライダーを表示領域いっぱいにしていきましょう。

JS

script.js
new Splide('.splide', {
    width: "100vw",
    height: "100vh",
}).mount();

Tips
単位付きの数字はダブルクオーテーションで囲みます。
そのオプションに使える単位が１つしかないとき（speedのms等）や、「数字を指定した場合はhogehogeとして扱われ」と書いてあるときは、ダブルクオーテーションなしの数値のみを書きます。

width,heigthについては単位がpxであれば、数値のみ書きます。今回はvw,vhを使いたいのでダブルクオーテーションで囲む必要があります。

CSS

JS側の設定で表示領域いっぱいになるのはスライダーの枠だけなので、imgの横幅は別途CSS側で指定してやる必要があります。
リセットCSSやご自身のコモンCSSの設定によってはすでに以下のおまじないが記述されている場合もありますが、そうでない方は以下のコードをstyle.cssの上の方に貼っておいてください。

m(_ _)m
あくまでSplideの練習なので、max-width:100%のほうがいいんじゃないの？とかそういうのはすっ飛ばします。

css
.splide img {
    width: 100%;
    height: auto;
}

デモ

See the Pen my-Splide002 by yoruokamix (@yoruokamix) on CodePen.

どうでしょうか？表示領域いっぱいのスライダーができましたね。
ただ、クロップ位置が上になっているため、猫ちゃんが見切れています。これを調整するためのCSSを書き足してみます。

スライダーを表示領域いっぱいに表示する 改

CSS

style.css
.splide__slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  display: block;
}

object-fit: cover; を使うことで、画像の縦横比はそのままに、はみ出す部分をカットして枠にぴったり収まるように表示されます。また、object-position: center center;で水平方向・垂直方向ともに中央基準になります。

デモ

See the Pen my-Splide003_step001 by yoruokamix (@yoruokamix) on CodePen.

無事に猫ちゃんが中央に表示されるようになりました。 ただ、このあたりは準備した画像との兼ね合いもありますし、少なくとも画像を準備する段階で横長か縦長かくらいは揃えておいたほうがいいかもしれませんね。

スライダーの自動再生とループ設定

それではまたSplideのオプションに戻りましょう。
使用するオプションは、以下の３つになります。

オプション デフォルト 今回の設定 設定の意図
type slide loop スライダーをループさせる
autoplay false true 自動再生する
pauseOnHover true false マウスホバーでスライダーを止めない

詳しい説明は公式ドキュメントを読んでください。オプション名でなんとなく察しがつくものについては説明を割愛しますが、ループの設定はスライダーのタイプ(type)で行います。
typeは

  • slide
  • loop
  • fade

の３つがあり、slideとloopの違いは一番最後のスライドまで行ったときに、ループさせるかどうかです。似たようなオプションにrewindというものがありますが、これは一番最後のスライドまで行ったときに巻き戻すかどうかなので少し挙動が違います。

JS

表のとおりにオプションを追加してみましょう。大文字小文字を間違えると動かないので要注意。

script.js
new Splide('.splide', {
    width: "100vw",
    height: "100vh",
    type: "loop",
    autoplay: true,
    pauseOnHover: false,
}).mount();

Tips
true,falseについてはダブルクオーテーションで囲む必要はありません。
loopは文字列ですので、ダブルクオーテーションで囲みましょう。

デモ

See the Pen my-Splide003_step002 by yoruokamix (@yoruokamix) on CodePen.

これで表示領域いっぱいのスライダー（自動再生、無限ループ）が完成しました。

まとめ

今回はメインビジュアル風のスライダーを作成してみました。次回は、一度に複数のスライドを表示する方法についてやっていきたいと思います。

おまけのオプション

speed

スライダーの移動時間

interval

次のスライドに切り替わるまでの時間

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?