プラグイン【Swiper】で作成するスライドショーいろいろ
最終更新日: Update!!
まだまだクライアントワークで使用頻度が高いスライドショーですが、サイトデザインの多様化とともにいろんなバリエーションが求められるようになってきています。そんな要望に対して簡単にお答えすることができるプラグインが「Swiper」です。今回はこのプラグインで様々なスライドショーを簡単に作成する方法をまとめていきたいと思います。
いかがでしょうか、各パラメーターを組み合わせて自分好みの仕様で簡単にカスタマイズできるのは便利ですね。この他にもいろんな設定が可能です。今回のサンプルはこちらに用意しましたのでご参考に!
スライドショー用のjavascriptプラグイン【Swiper】
Swiperはjavascriptのプラグインで、いろんな形のスライドショーを簡単に作成することができるのが大きな特長です。そして、jQureyを使わなくても動作するため、コンフリクトなどのトラブルもなく安心して使うことができます。 【Swiper】 http://idangero.us/swiper/ 実装方法もいたってシンプルで、SwiperのCSSとjavascriptファイルをそれぞれロードし、スライドショー部分を下記のようにHTMLで構成します。ちなみにSwiperのCSSとjavascriptファイルはCDNでも利用できます。(上記公式サイト参照) 【HTML】(一部抜粋)<html> <head> <link rel="stylesheet" href="[FILE_PATH]/swiper.min.css"> </head> <body> <!-- swiper start --> <div class="swiper-container"> <!-- swiper スライド部分 --> <div class="swiper-wrapper"> <div class="swiper-slide"><img src="./image-01" alt="スライドイメージ1"></div> <div class="swiper-slide"><img src="./image-01" alt="スライドイメージ2"></div> <div class="swiper-slide"><img src="./image-01" alt="スライドイメージ3"></div> <div class="swiper-slide"><img src="./image-01" alt="スライドイメージ4"></div> </div> <!-- swiper ページャー部分 --> <div class="swiper-pagination"></div> <!-- swiper ナビゲーション部分 --> <div class="swiper-button-prev"></div> <div class="swiper-button-next"></div> </div> <!-- swiper end --> <script src="[FILE_PATH]/swiper.min.js"></script> </body> </html>次にCSSでSwiperのラップ要素の幅と高さを適宜指定しておきます。 【CSS】
.swiper-container { width: 600px; height: 400px; }そしてJavaScriptでスライドショー部分の定義を関数内で指定していきます。ここではパラメーターごとに様々な仕様が設定できます。詳しくは公式サイトを参照していただくのですが、主なパラメーター設定をまとめていきたいと思います。まずは基本となるSwiperの初期化形を見ていきます。 【javascript】
var mySwiper = new Swiper ('.swiper-container', { // スライドショーの設定(各パラメーターを入力) speed: 500, loop: true // ページャーの出力 pagination: { el: '.swiper-pagination', }, // ナビゲーションの出力 navigation: { nextEl: '.swiper-button-next', prevEl: '.swiper-button-prev', } });
Swiperの各パラメーター
上記のコードで次にあげるパラメータを設定することで自由にスライドショーの仕様を決めることができます。以下一部になりますがよく使うものをまとめております。direction | スライドの方向 / horizontal:横方向、vertical:縦方向 |
---|---|
speed | スライドの移動スピード / ミリ秒の数値で指定 |
spaceBetween | スライド間の余白 / px換算の数値で指定 |
slidesPerView | 表示区域内に表示させるスライドの枚数 / 枚数を数値で指定、auto |
centeredSlides | 表示区域内の中心にスライドを合わせる / true、false |
loop | スライドを無限にループ表示させる / true、false |
effect | スライドの表示方法を指定 / slide、fade、cube、coverflow、flip |
autoplay | スライドの自動再生 / delay:3000などスライド開始までの時間をミリ秒で指定 |
breakpoints | レスポンシブ時の制御をブレークポイントで指定 / 320:{ パラメータ設定 }という形でブレークポイントを数値で指定 |
いかがでしょうか、各パラメーターを組み合わせて自分好みの仕様で簡単にカスタマイズできるのは便利ですね。この他にもいろんな設定が可能です。今回のサンプルはこちらに用意しましたのでご参考に!
sponserd
keyword search
recent posts
- GSAPとvivusを使ったSVGのドローアニメーション
GSAPとvivusを使ったSVGのドローアニメーション
- GSAPでScrollTriggerプラグインを使ったスクロール固定表示アニメーションの応用
GSAPでScrollTriggerプラグインを使ったスクロール固定表示アニメーションの応用
- Shopifyでオリジナルテーマ制作やテーマカスタマイズで使えるTips #3
Shopifyでオリジナルテーマ制作やテーマカスタマイズで使えるTips #3
- Shopifyでオリジナルテーマ制作やテーマカスタマイズで使えるTips #2
Shopifyでオリジナルテーマ制作やテーマカスタマイズで使えるTips #2
- Shopifyでオリジナルテーマ制作やテーマカスタマイズで使えるTips #1
Shopifyでオリジナルテーマ制作やテーマカスタマイズで使えるTips #1
- ViteでReactとReact Routerを使ってみる
ViteでReactとReact Routerを使ってみる
- ViteでPugのコンパイル環境を導入する
ViteでPugのコンパイル環境を導入する
- ViteでMarkuplintとPrettierを使える環境を構築する
ViteでMarkuplintとPrettierを使える環境を構築する
categories