「メイン画像」と「サムネイル画像」が同時に動くスライダーは、商品紹介や作品ギャラリーなどでよく使われる人気のデザインです。
今回は、Swiper.jsとjQueryを使って「2つのスライドを一緒に動かす仕組み」を実装しています。

Swiperで2つのスライドを連動！実装の全体像

HTMLの構造はシンプルで、.bigクラスの大きいスライダーと、.smallクラスの小さいサムネイルスライダーをそれぞれ配置。
メインには大きな画像＋説明テキスト、サムネイルには画像のみを並べることで、視覚的に分かりやすい構成になっています。

Swiperの基本設定（slidesPerView, loop, speedなど）を分けて指定し、矢印ボタンのクリックで両方のスライダーを同時にスライドさせることで、2つのSwiperを完全に連動させています。

実際に動くサンプルを確認したい場合は、以下のCodePenをご覧ください。
クリックすると、メインスライドとサムネイルが連動して動く動作をそのまま体験できます。

See the Pen Untitled by kotetsu (@zupshihe-the-encoder) on CodePen.

このスライダーの特徴とメリット

このスライドの大きな特徴は、「連動」と「レイアウト自由度」の両立です。
一般的なサムネイル連動スライダーでは、Swiperのthumbsオプションを使う方法もありますが、今回のように2つのSwiperを個別制御することで、自由な配置やデザインカスタマイズが可能になります。

例えば今回のCSSでは、.bigを画面中央寄せ、.smallを右側に配置しており、2つのスライダーが横並びで動く構成になっています。
メイン画像には枠線と角丸（border-radius: 10px;）を適用し、サムネイル側はobject-fit: cover;で整った見た目に。
このように、レイアウトや動き方を自由に調整しやすい点が大きなメリットです。

また、Swiperはレスポンシブ対応も得意なので、スマホでは縦並びにレイアウトを変更するなど、メディアクエリを加えるだけで柔軟に対応できます。

実装時の注意点とトラブル対策

Swiperを使った2段スライダーを実装するときの注意点は、初期化と同期のタイミングです。
特に、2つのSwiperを連動させる場合、片方のスライド操作に対してもう片方のスライドを正確に追従させる必要があります。

今回の例では、detailSwiper.slideNext() と thumbSwiper.slideNext() を矢印ボタンのクリックイベントで同時に呼び出すことで、両方のスライドが同時に動く仕組みを作っています。
また、thumbSwiper.slideTo(0, 0) のように初期位置を明示的に設定することで、表示ズレを防ぐことも重要です。

さらに、loop: true を使う場合は、スライドの順番や複製スライドの扱いに注意する必要があります。
ループ設定を使うと、Swiper内部でスライドが自動的に複製されるため、サムネイルとの対応を間違えると、見た目がずれることがあります。
こうした点を意識すれば、滑らかで連動性の高いスライダーが安定して動作します。

まとめ

このスライドは、「2つのスライダーを自由に連動」できる柔軟な構成が最大の魅力です。
商品紹介・ポートフォリオ・ギャラリーなど、見せ方にこだわりたいWebサイトにぴったり。
SwiperとjQueryを組み合わせることで、初心者でも簡単に美しく動くスライドを作れます。
デザインの幅を広げたい方は、ぜひこの実装をベースにアレンジしてみてください。

Webサイト、LP制作やお仕事の依頼、ご相談など
お気軽にお問い合わせください。