[Vue.js]カルーセルスライダーを作成[Element,Swiper]

CDN経由で簡単に実装

カルーセルスライダーとは、画像が横並びもしくは縦並びにスクロールしていくギャラリーのようなものです。カルーセル、もしくはスライダーとも呼ばれます。

カルーセルスライダーを実装するための近道としてプラグイン「swiper.js」もしくはjQueryと共に「slick」などを利用して作成していましたが、今回はVueのライブラリを用いてのカルーセルスライダーを実装したいと思います。

ここではコンポーネントを作るほどではない小規模なサイトを想定しVue CLIを利用せず、CDN経由でライブラリを読み込みます。

使用するライブラリはシンプルなコード実装できるコンポーネントライブラリ「Element」「Swiper(Vue版)」それぞれを使用してみます。

早引き:ライブラリ別一覧

Elementを利用した場合

作成にあたって公式サイトを参考にさせて頂きました。
Element – Carousel

See the Pen vue-element-carousel-normal by nanase webdesigner (@nanase-777) on CodePen.

Elementの読み込み

Vue関連

CSS

公式サイトよりCDNのURLを取得します。Vue.jsより後に読み込みます。
Elementにはスタイルシートが存在するのでそちらも忘れずにインポートしておきます。

HTML:基本の書き方

設定

Element - Carousel設定一覧

記載例 : 属性名="属性値"

属性名説明
height カルーセルスライダーの高さを設定。
デフォルト値:なし。
initial-index 一番最初に表示するスライドの番号を指定。0始まり。
デフォルト値:0
trigger インジケータが反応する動作を指定。
"click"(クリック時)もしくは"hover"(マウスホバー時)。
デフォルト値:hover
autoplay 自動でスライドするかを指定。true/false
デフォルト値:true
interval 自動でスライドする際の表示間隔をミリ秒で指定。
デフォルト値:3000
indicator-position インジケータの表示場所を指定。
"outside"(スライドの下部)もしくは"none"(非表示)。
デフォルト値:なし。
arrow [前へ][次へ]ボタンが表示されるタイミングを指定。
"always"(常に)、"hover"(ホバー時)、"never"(非表示)。
デフォルト値:hover
type "card"を指定すると一度に3枚表示され、かつ中央の写真が一番大きく表示されるようになる。
デフォルト値:なし。
loop 画像をループさせるかを指定。true/false
デフォルト値:true
direction スライドする向きを指定。
"horizontal"(水平)もしくは"vertical"(垂直)。
デフォルト値:horizontal
intervalautoplayの記載の際には:(コロン)を付けます。例 [:interval="4000"]

カスタマイズ

See the Pen vue-element-carousel by nanase webdesigner (@nanase-777) on CodePen.

HTML:一部を抜粋

interval="5000"でスライドの表示間隔を5000ミリ秒に。arrow="always"[前へ][次へ]ボタンを常に表示。triggerはデフォルトだとマウスをホバーするだけでスライドが動き不便なので、クリック時にのみスライドするよう"click"に変更。height="200px"でスライドの高さを200pxに設定。

CSS:一部を抜粋

サンプルではインジケータの形状と[前へ][次へ]ボタンのアイコンを変更しています。ここではアイコンの変更方法について紹介します。

Elementの公式サイトにアイコン一覧があるので開きます。ブラウザがChromeの場合ですが、表示させたいアイコンを右クリック→「検証」でi要素のbefore要素にコードが表示されるので、それを引用しました。

以上でElementを用いたカルーセルスライダーが作成できました。コードも直感的で分かりやすく実装しやすいと感じました。
応用が効くかとなると「swiper」や「slick」には劣ってしまうというのが正直な所感です。

Swiper(Vue版)を利用した場合

作成にあたって公式サイトを参考にさせて頂きました。
Swiper API

Swiperの読み込み

Vue関連

※2022/04/12追記
vue-awesome-swiperの読み込み先について。
https://cdn.jsdelivr.net/npm/vue-awesome-swiper
では読み込めないとのエラーが出ていたので
https://cdn.jsdelivr.net/npm/vue-awesome-swiper@3.1.2/dist/vue-awesome-swiper.js
へ修正しています。

CSS

Swiperにはスタイルシートが存在するのでそちらも忘れずにインポートしておきます。

設定

See the Pen vue-swiper-normal by nanase webdesigner (@nanase-777) on CodePen.

HTML:基本の書き方

Swiperオプション:抜粋

よく使われると思われるオプションを抜粋しています。

オプション説明
loop スライドをループするか否かを指定。true=ループする/false=ループしない。
デフォルト値:false。
effect スライドが変わる際のアニメーションを指定する。
'slide','fade','cube','coverflow','flip','creative'から選択可能。
デフォルト値:'slide'
slidesPerView 表示するスライドの枚数を指定。
デフォルト値:1
spaceBetween スライド同士の空き間隔を指定。
デフォルト値:0
speed スライドする際のスピードをミリ秒で指定。
デフォルト値:300
autoplay 自動でスライドするか否かを指定。
true=自動化/false=自動化しない。
デフォルト値:false
autoplay
{ delay }
autoplay有効時、スライドする間隔をミリ秒で指定。
デフォルト値:300
pagination ページネーション(機能的にはインジケータとも言う)を有効化。
pagination
{ clickable }
インジケータをクリック時に指定の要素へスライドするか否かを指定。
true=有効/false=無効。
デフォルト値:false
※更に詳細が知りたい場合は公式サイトをご覧ください。

レスポンシブ対応時

オプションにbreakpointsを追加することでレスポンシブ対応が可能です。メディアクエリを「小→大」の順に記載し、それぞれにオプションの値を設定していきます。

また、[前へ][次へ]ボタンとインジケータのデザインも変更してみました。どのクラスを変更すれば良いかの参考になればと思います。

CSS

カスタマイズ

複数のスライドを表示するとき、slidesPerViewを使って表示枚数を指定すると思います。便利ではありますがウィンドウのサイズが変化しても表示枚数は固定されます。ブレイクポイントを設定するのも手間です。
そこでウインドウに合わせて表示枚数も増やすことはできないかと思ったところ次のサイトを参考に再現ができました。

左側だけ余白のあるスライダーの実装方法【swiper.js】

以下、サンプルとなります。ウインドウ幅を縮小して確認してみてください。

See the Pen vue-swiper by nanase webdesigner (@nanase-777) on CodePen.

Vue:一部を抜粋

表示枚数は固定しないのでslidesPerView:'auto';に設定します。
ここで各スライドを囲む要素である.swiper-slideが存在するのですが、デフォルトではwidth:100%;となっているため現段階では1枚しか表示されません。そこで次のようにwidthを指定します。

CSS:一部を抜粋

各スライドを囲む.swiper-slideに対してwidthを設定し、大外枠の要素である.swiper-containerにはwidthを設定しないようにします。
また、[前へ][次へ]ボタンが使用不可の場合は非表示にしてユーザーに優しい仕様にしました。

以上でSwiper(Vue版)を用いたカルーセルスライダーが作成できました。

カスタマイズ方法はSwiper.jsとほぼ変わらないので、Swiper.jsを扱ったことがある方には親しみやすいライブラリではないでしょうか。
カスタマイズも多種多様に可能です。変化を付けたい場合に役立ちますね。