ECサイトで見るような複数の画像をクリックするとメインの画像が切り替わるといった実装方法を説明していきます。
- 全体の横幅を固定にする（width）
- 動きを削除するために、swiperのオプション、アニメーションの記述を削除する
- 2つめのswiperに複数の画像を表示させる（slidesPerView）
- 2つのswiperを連動させる（{thumbs: {swiper: swiper2}}
- JavaScriptのルールに従い、swiper1とswiper2の順番を変更する
素材ファイルをダウンロードするにはプレミアムプランへの登録が必要です
詳しくみるソースコードを閲覧するにはプレミアムプランへの登録が必要です
詳しくみるデモを閲覧するにはプレミアムプランへの登録が必要です
詳しくみる