今回は、サムネイル付きのスライダーを作ったので、作り方をご紹介していきます！
タイトルにもあるように、Swiperを使っていきます！
Swiperの使い方が分からない方は、【Swiperの基本】シンプルで美しいスライダーを作成する方法！からご覧ください！
Webサイトでスライダーを使用すると、コンテンツを魅力的に見せることができます。 しかし、スライダーを自分で一から実装するのは難しく、手間がかかます。 そんな時に役立つのが「Swiper」というライブラリです。 Swip[…]
それでは、2つのSwiperを連動させたスライダーを作っていきましょう！
完成したコードとイメージ
まずは、完成形からご覧いただきます！
See the Pen 【Swiper】サムネイルをつけて連動させる。（2つのスライダーを連動） by 1buk1 (@1buk1) on CodePen.
上、もしくは下のスライダーを動かすと、２つのスライダーが連動しているのがお分かりいただけますでしょうか。
これは、２つのSwiperを使って実装しています。
基本を押さえていれば、約30分もあれば実装までもっていけると思います。
では、次から実装の方法を紹介していきます。
１つ目のスライダーを作る。（注意事項など）
まずは、上部（メイン）のスライダーを作っていきましょう！
<div class="content swiper-area">
<div class="swiper swiperMain">
<div class="swiper-wrapper">
<div class="swiper-slide"><div class="swiper-content item black">slide-01</div></div>
<div class="swiper-slide"><div class="swiper-content item red">slide-02</div></div>
<div class="swiper-slide"><div class="swiper-content item green">slide-03</div></div>
<div class="swiper-slide"><div class="swiper-content item blue">slide-4</div></div>
<div class="swiper-slide"><div class="swiper-content item yellow">slide-05</div></div>
</div>
</div>
<div class="swiper-controller">
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
</div>
</div><!-- /.content -->同一ページ内で２つのSwiperを使用するので、「swiperMain」には独自のクラス名をつけましょう！
このクラスを使って、Swiperを初期化していきます。
あと、ページ送りの矢印は、デフォルトの状態では画像にかぶる形で配置されます。
今回、この記事では画像に被らないように実装したかったので、.swiperから外に出しています。
「.swiper」の中にいれてしまうと、画像の外に移動させても、「.swiper」に「overfloe: hidden;」がかかっているので表示されません。
また、「overfloe: hidden;」をとってしまうと、今回のような見た目のスライドになりませんので、ご注意ください。
- 初期化用に独自のクラス名をつけておく。
- ページ送りを画像と被らないようにしたい場合は、「.swiper」の外に出す。
２つ目のスライダーを作る。（注意事項など）
それでは、下のスライダー（サブ）を作っていきましょう！
<div class="swiper swiperThumbnail">
<div class="swiper-wrapper">
<div class="swiper-slide"><div class="thumbnail-item item black">slide-01</div></div>
<div class="swiper-slide"><div class="thumbnail-item item red">slide-02</div></div>
<div class="swiper-slide"><div class="thumbnail-item item green">slide-03</div></div>
<div class="swiper-slide"><div class="thumbnail-item item blue">slide-04</div></div>
<div class="swiper-slide"><div class="thumbnail-item item yellow">slide-05</div></div>
</div>
</div>注意事項としては、１つめ同様に初期化用のクラス名を付与してあげてください。「swiperThumbnail」これです！
- 1つめ：独自のクラス（swiperThumbnailなど）
- ２つ目：.swiper
とかで、初期化してしまうと、動きませんのでご注意ください。
初期化には必ず独自のクラス名をつけるか、クラス名が面倒な人はネスト指定してあげてもおkです！
- 初期化用のクラスは独自クラスを付けなくてもネストで指定してもOK！
２つのスライダーを連動させていく！
それでは、２つのスライダーを連動させてあげましょう！
const swiperThumbnail = new Swiper('.swiperThumbnail', {
slidesPerView: 5,
spaceBetween: 5,
});まず、サブとなるSwiperを初期化して、必要なオプションを記述します！
このとき、必ずサブとなるSwiperからから初期化してあげてください。
メインのスライダーを先に初期化してしまうと動きません。
次に、メインとなるスライダーを初期化します。
const swiperMain = new Swiper('.swiperMain', {
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
thumbs: {
swiper: swiperThumbnail,
},
});メインのスライダーには、連動させるためのオプションを追加してあげます！
thumbs: {
swiper: swiperThumbnail,
},ここでは、「thumbs」オプションを使います。
「thumbs」オプションに初期化に使用したSwiperのインスタンス名を入れてあげます。
この記事では、サブのSwiperは、「swiperThumbnail」で設定していたので入れます。
これで、サブ用にコーディングしたSwiperとメインのSwiperが連動したスライダーが完成しました！
完成したコードを載せておきます。
const swiperThumbnail = new Swiper('.swiperThumbnail', {
slidesPerView: 5,
spaceBetween: 5,
});
const swiperMain = new Swiper('.swiperMain', {
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
thumbs: {
swiper: swiperThumbnail,
},
});たったこれだけの記述で、２つのSwiperを連動させて、見栄えのいいスライダーを作ることができました！
- 必ずサブとなるSwiperから初期化する。
- 「thumbs」オプションを使い連動させる。
まとめ
「２つのSwiperを連動させる」と聞くと、難しくて、懸念しがちですが、Swiperの基本さえ押さえていれば、簡単に実装できます。
ぜひ、みなさんも挑戦してみてください。
他にもSwiperを使ったスライドを作っていますので、気になる方はSwiperの使い方とレイアウト集！こちらかをご覧ください。
本記事では、Swiperの導入方法から基本的な記述を学べるだけでなく、多彩なレイアウトを実装できるようになります。 Swiperは、有名企業のWebサイトでも使われている高性能なJavascriptライブラリです。 カスタマイ[…]
