swiper.jsを使用して、メインのスライドとテキストのスライドが連動して動くダブルスライダーを作成する方法について記します。
通常のSwiper.jsでのスライダーの作成はご存じの前提で進めさせていただきますので、Swiper.jsを初めて使う方はこちらから先に参考いただければと思います。
Swiper.jsでスライダーを実装する
①メインのスライダーを作成する
わかりやすいように、最初にメインのSwiperスライダーを作成して、そこから変更を加えていきます。
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.css">
<script src="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.js"></script>
<style>
.swiper{
width: 70%;
}
.swiper img{
width: 100%;
}
</style>
<div class="swiper swiper_main">
<div class="swiper-wrapper">
<div class="swiper-slide"><img src="./img/sample1.png"></div>
<div class="swiper-slide"><img src="./img/sample2.png"></div>
<div class="swiper-slide"><img src="./img/sample3.png"></div>
</div>
<div class="swiper-pagination"></div>
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
</div>
<script>
const swiper_main = new Swiper('.swiper_main', {
loop: true,
autoplay: {
delay: 2000,
},
pagination: {
el: '.swiper-pagination',
},
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev",
},
})
</script>メインのスライダーができました。
②テキストのスライダーを作成
メインスライダーに連動して動くスライダーなので、矢印もドットもいりません。
<style>
.swiper_text{
width: 50%;
border-radius:15px;
background-color: #B0BEC5;
padding: 30px 0;
margin-top: 20px;
display: flex;
justify-content: center;
}
.swiper_text .swiper-slide{
display: flex;
justify-content: center;
}
</style>
<div class="swiper swiper_text">
<div class="swiper-wrapper">
<div class="swiper-slide">
<p class="txt">
スライド1のテキストが入ります<br>
スライド1のテキストが入ります<br>
スライド1のテキストが入ります<br>
</p>
</div>
<div class="swiper-slide">
<p class="txt">
スライド2のテキストが入ります<br>
スライド2のテキストが入ります<br>
スライド2のテキストが入ります<br>
</p>
</div>
<div class="swiper-slide">
<p class="txt">
スライド3のテキストが入ります<br>
スライド3のテキストが入ります<br>
スライド3のテキストが入ります<br>
</p>
</div>
</div>
</div>
<script>
//追記（メインのスライダーのスクリプトの上に）
const swiper_text = new Swiper(".swiper_text", {
loop: true,
slidesPerView: 1,
})
</script>テキストスライダーのインスタンス化は必ずメインのスライダーの上で行います。そうしないと後々メインスライダーと連携する際にエラーが出てしまいます。
テキストスライダーが追加されました。
まだ二つのスライダーは連動していません。
③メインスライダーとテキストスライダーを連動させる
下記のようにメインスライダーのオプションに3行追記して、テキストスライダーを連動させます。
swiper: の後にはテキストスライダーのクラスを指定します。
const swiper_main = new Swiper('.swiper_main', {
loop: true,
autoplay: {
delay: 2000,
},
pagination: {
el: '.swiper-pagination',
},
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev",
},
thumbs: { //追記
swiper: swiper_text, //追記
}, //追記
})メインスライダーとテキストスライダーが連動しました！
メインスライダーの動きに合わせてテキストスライダーが動くと思います。
④テキストスライダーのスワイプを無効化
今の状態では、テキストスライダーをスワイプするとスライドを動かすことができ、メインスライダーとのずれが生じてしまうので、スワイプを無効化します。
allowTouchMoveオプションをfalseにすることで、スワイプを無効化できます。
const swiper_text = new Swiper(".swiper_text", {
loop: true,
slidesPerView: 1,
allowTouchMove: false,
})テキストスライダーがスワイプできなくなっていればOKです。
ソースコード全文
最後にソースコードを全文載せておきます。
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.css">
<script src="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.js"></script>
<style>
.swiper{
width:70%;
}
.swiper img{
width: 100%;
}
.swiper_text{
width: 50%;
border-radius:15px;
background-color: #B0BEC5;
padding: 30px 0;
display: flex;
justify-content: center;
}
.swiper_text .swiper-slide{
display: flex;
justify-content: center;
}
</style>
<div class="swiper swiper_main">
<div class="swiper-wrapper">
<div class="swiper-slide"><img src="./img/sample1.png"></div>
<div class="swiper-slide"><img src="./img/sample2.png"></div>
<div class="swiper-slide"><img src="./img/sample3.png"></div>
</div>
<div class="swiper-pagination"></div>
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
</div>
<div class="swiper swiper_text">
<div class="swiper-wrapper">
<div class="swiper-slide">
<p class="txt">
スライド1のテキストが入ります<br>
スライド1のテキストが入ります<br>
スライド1のテキストが入ります<br>
</p>
</div>
<div class="swiper-slide">
<p class="txt">
スライド2のテキストが入ります<br>
スライド2のテキストが入ります<br>
スライド2のテキストが入ります<br>
</p>
</div>
<div class="swiper-slide">
<p class="txt">
スライド3のテキストが入ります<br>
スライド3のテキストが入ります<br>
スライド3のテキストが入ります<br>
</p>
</div>
</div>
</div>
<script>
const swiper_text = new Swiper(".swiper_text", {
loop: true,
slidesPerView: 1,
allowTouchMove: false,
})
const swiper_main = new Swiper('.swiper_main', {
loop: true,
autoplay: {
delay: 2000,
},
pagination: {
el: '.swiper-pagination',
},
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev",
},
thumbs: {
swiper: swiper_text,
},
})
</script>以上、swiper.jsでダブルスライダーを作成する方法でした。
二つのスライダーを連動させて作成するものとして下記のようなスライダーもあります。
【Swiper】サムネイル付きのスライダーを作成する
また、下記ではswiper.jsで作成できる様々なスライダーを紹介しています。
Swiperスライダーのデモ22選
