画像のスライダーをサクッと作りたいなぁ。自分で作るのも難しそうだし、便利なプラグインとかないかなぁ、、、
今回は、こういった方に向けて、スライダー系プラグイン「Swiper」の使い方を紹介していきます。
動きのあるプラグインは、jQueryがよく使われたりしますが、今回紹介するSwiperはjQueryなしで実装できます。
画像スライダーをラクに実装するならSwiperが便利
まずは、デモをお見せします。
こういった感じです。こういった画像スライダーが簡単に作れてしまいます。
実装するには
上記のデモには、コードもセットで載せてあるので、そのままコピペすれば実装できますが、念のため、解説少し解説しておきます。
実装するには、公式サイトにいきます。
≫Swiper
SwiperはCDNが使えるので、「Get Started」というところから、読み込みにいけます。
初心者の方へ
CDNとは、「Content Delivery Network」の略で、ネットワークを通じて、同一のコンテンツを効率的に配布するための仕組みです。
ざっくり簡単にまとめると、外部にあるコンテンツをサクッと持ってくることが出来る仕組みです。
CDNを読み込む
まずはheadタグの中で下記をコピペします。スライダーのスタイルを読み込むためですね。
<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css">次にbodyの閉じタグの前くらいで、下記をコピペします。スライダーのJavaScriptを読み込むためです。
<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>プラグインの読み込みは、これだけでOKです。
JavaScriptの細かい設定は、デモのコードにコメントで記載しています。
Swiperでスライダーをカスタマイズする
Swiperを使うことで、他のデザインにスライダーをカスタマイズすることができます。
スライダーをフェードで切り替え
デモは下記の通り。
コードの変更点はJavaScriptで１行だけ書き換えます。
JavaScriptのコード
// オプション設定
loop: true, // ループ
speed: 600, // 切り替えスピード(ミリ秒)。
slidesPerView: 1, // １スライドの表示数
spaceBetween: 0, // スライドの余白(px)
direction: "horizontal", // スライド方向
effect: "fade", // スライド効果 ※ここを変更effectの部分だけ書き換えています。
なお、effectは色々な種類に書き換えが可能で、例えば、下記の通り。
- slide：スライド
- fade：フェード
- cube：キューブの回転
- coverflow：カバーフロー
- flip：フリップの回転
それぞれ、デモを置いておきます。コードも見れるようになっているので、コピペすれば、そのまま使用できます。
cubeの場合
coverflowの場合
flipの場合
その他のカスタマイズ
今回はeffectのカスタマイズを紹介しましたが、その他にも多くのカスタマイズが可能です。気になる方は、ぜひ調べてみてください！
それでは、今回は以上となります。
スライダーが簡単に実装できるので、ぜひ作ってみてください。
