Swiper.jsは本来スライダーを生成するためのJavascriptライブラリですが、タブ切り替えメニューを実装する事もできます。
本記事ではその方法を解説していきます。
通常のSwiper.jsでのスライダーの作成はご存じの前提で進めさせていただきますので、Swiper.jsを初めて使う方はこちらから先に参考いただければと思います。
Swiper.jsでスライダーを実装する
①ページネーション付きのスライダーを作成する
まずはSwiper.jsを使用して、ページネーション付きのスライダーを作成します。
ページネーションはタブメニューの切り替えボタンとして使いますので、HTML上では.swiper-wrapperの上に置くようにします。
また、クリックでコンテンツを切り替えれるようにclickable: trueも忘れずに入れましょう。
<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>
.sample-slider {
width:70%;
}
.sample-slider img {
width: 100%;
}
</style>
<div class="swiper sample-slider">
<div class="swiper-pagination"></div> <!-- ページネーションはスライダーの上に置いておく -->
<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>
<script>
const swiper = new Swiper('.sample-slider', {
pagination: {
el: '.swiper-pagination',
clickable: true,
},
})
</script>
ページネーション（ドット）付きのスライダーができました。
ページネーションをクリックするとコンテンツが切り替わると思うので試してみてください。
②ページネーションをタブメニューのボタンの見た目にする
ではCSSでページネーションをタブメニューの切り替えボタンっぽくしてみましょう。
.sample-slider .swiper-pagination {
position: static;
display: grid;
grid-template-columns: repeat(3,1fr);
}
.sample-slider .swiper-pagination-bullet {
width: 100%;
border-radius: 0;
height: auto;
margin: 0!important;
padding: 10px;
box-sizing: border-box;
opacity: initial;
background: lightgrey;
}
.sample-slider .swiper-pagination-bullet-active {
background: aqua;
}
ページネーションがタブメニューの切り替えボタンっぽくなりました。
次はボタンに文字を入れてみましょう。
③タブメニューのボタンに文字を入れる
Swiper.jsではrenderBulletオプションを使う事で、ページネーションの中身を変更する事ができます。
これを使ってタブメニューのボタンに文字を入れてみましょう。
const swiper = new Swiper('.sample-slider', {
pagination: {
el: '.swiper-pagination',
clickable: true,
/*----------- ↓ 追加 ↓ ------------*/
renderBullet: function (i, classes) {
const buttons = ['メニュー1', 'メニュー2', 'メニュー3']
return `<span class="${classes}">${buttons[i]}</span>`
},
/*----------- ↑ 追加 ↑ ------------*/
},
})
タブメニューのボタンに文字が入りました。
④切り替えアニメーションを変更する
現在切り替えアニメーションが『スライド』になっています。
最後にこの切り替えアニメーションを変更する方法について見て終わりにしましょう。
一瞬で切り替える（アニメーションなし）
speed: 0 をオプションに追加すると、タブコンテンツが一瞬で切り替わる様になります。
const swiper = new Swiper('.sample-slider', {
.
.
.
speed: 0,
})ふわっと切り替える
effect: ‘fade‘ を追加してspeedを指定すると、タブコンテンツがふわっと切り替わるようになります。
const swiper = new Swiper('.sample-slider', {
.
.
.
speed: 1000,
effect: 'fade',
})ソースコード全文
最後にソースコードを全文載せておきます。
※今回タブコンテンツに画像を使用しましたが、もちろん画像以外も使用できます。
<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>
.sample-slider {
width:70%;
}
.sample-slider img {
width: 100%;
}
.sample-slider .swiper-pagination {
position: static;
display: grid;
grid-template-columns: repeat(3, 1fr);
}
.sample-slider .swiper-pagination-bullet {
width: 100%;
border-radius: 0;
height: auto;
margin: 0!important;
padding: 10px;
box-sizing: border-box;
opacity: initial;
background: lightgrey;
}
.sample-slider .swiper-pagination-bullet-active {
background: aqua;
}
</style>
<div class="swiper sample-slider">
<div class="swiper-pagination"></div>
<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>
<script>
const swiper = new Swiper('.sample-slider', {
pagination: {
el: '.swiper-pagination',
clickable: true,
renderBullet: function (i, classes) {
const buttons = ['メニュー1', 'メニュー2', 'メニュー3']
return `<span class="${classes}">${buttons[i]}</span>`
},
},
speed: 0,
})
</script>以上、Swiper.jsでタブ切り替えを実装する方法でした！
