【Swiper】サムネイルのマウスホバーとスライダーを連動させてみた

さて今回は、メインのスライダーとサムネイルがあるデザインで、
サムネイルをホバーするとメインのスライドが切り替わるようにします。
swiperのメソッドを使用してシンプルに実装できるので、是非使ってみてください！

基本の連動するスライダーを作成

まずは基本となるスライダーを作成します。
この状態では、クリックで連動します。

See the Pen 連動するスライダー by minmin (@minminm)on CodePen.

thumbsでサムネイルにしたいスライダーのインスタンス名thumbnailSwiperを指定すると、
2つのスライダーが連動するようになります。

thumbs: {
  swiper: thumbnailSwiper
}

メインスライダーのコードをサムネイルにしたいスライダーの前に書くと動かないのでご注意ください。

【完成形】ホバーで切り替え

See the Pen サムネイルをホバーで連動するスライダー by minmin (@minminm)on CodePen.

それでは解説です。

slideToで指定

this.thumbnail = document.querySelectorAll('[data-thumbnail]')

this.thumbnail.forEach((trigger, i) => {
  trigger.addEventListener('mouseover', () => {

    this.slideNumber = i
    mainSwiper.slideTo(this.slideNumber)
  })
});

slideToは、指定したインデックス番号のスライドへ移動するためのメソッドで、Swiperに搭載されているメソッドです。

slideTo(index, speed, runCallbacks)

index：スライド番号(最初のスライドの番号は0)
speed：遷移時間(ms)
runCallbacks：推移させる場合true、させない場合はfalse

参考：Swiper API：Methods&Properties

他にもslideNextのように次のスライドへ進むなど、
色々なメソッドやプロパティが用意されています。

（loopを指定している場合はslideToメソッドではズレることがあり、その場合はslideToLoopメソッドを使用すると解消されるようです。）

スマホ・タブレットでの挙動

thumbsでの指定によって、タップでの連動が効いていますので、特にタッチパネル対応を行う必要はありません。

実際のイメージが付きやすいように

イメージしやすいようにエフェクトを追加したデモを用意しました🙌

See the Pen 【Swiper】デモ by minmin (@minminm)on CodePen.

おまけ

左側のみ余白があるスライダーのデザイン、よく見かけるのですが
意外と詰まるところなので、シンプルな方法を備忘録として残します。

See the Pen 【Swiper】左側のみ余白のあるスライダー by minmin (@minminm)on CodePen.

.swiperにpadding-leftを指定します。
loopを指定している場合は、padding-rightを解除します。
※padding-rightを指定すると、右側のみ一瞬真っ白になります。

最後に

今回はSwiperを扱いましたが、いかがでしたでしょうか？

Swiperには沢山のオプションがあるので、今後も色々なスライダーに挑戦していきます💪

ところで

ロジカルスタジオでは、フロントエンドエンジニアを募集しております！

下記リンクからお待ちしております！