it当記事ではサムネイル付きのスライダーをswiper.jsを使用して作成する方法についてデモ付きで解説します。swiper.jsのオプションを使用して二つのスライダーを連動させることで実現します。通常のSwiper.jsでのスライダーの作成はご存じの前提で進めさせていただきますので、Swiper.jsを初めて使う方はこちらから先に参考いただければと思います。Swiper.jsでスライダーを実装する目次1メインのSwiperスライダーを作成2サムネイル用のスライダーを作成3メインスライダーとサムネイルを連動させる4サムネイルに枠線とホバースタイルをつけるソースコード全文1メインのSwiperスライダーを作成わかりやすいように、最初にメインのSwiperスライダーを作成して、そこから変更を加えていきます。})</script>メインのスライダーができました。2サムネイル用のスライダーを作成サムネイル用のスライダーなので、矢印もドットもいりません。slidesPerViewには表示したいサムネイルの数を設定します。//追記</script>サムネイル用のスライダーのインスタンス化は必ずメインのスライダーの上で行います。しないと後々メインスライダーと連携する際にエラーが出てしまいます。見た目はいい感じになりましたが、メインスライダーとサムネイルはまだ連動していません。3メインスライダーとサムネイルを連動させる下記のようにメインスライダーのオプションに3行追記して、サムネイルを連動させます。後にはサムネイルスライダーのクラスを指定します。//追記})メインスライダーとサムネイルが連動しました!サムネイルをクリックするとメインスライダーが動くと思います。最後にソースコードを全文載せておきます。})</script>以上、swiper.jsでサムネイル付きのスライダーを作成する方法でした。二つのスライダーを連動させて作成するものとして下記のようなスライダーもあります。【Swiper】ダブルスライダーを作成するまた、下記ではswiper.jsで作成できる様々なスライダーを紹介しています。*次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。