前回はスライダーを作ってみたところまでですので、その下にページャー等を設置したスライダーを作っていきます。
htmlタグを追加
2つ目は大枠のclassを変えて設置してみましょう。
<div class="swiper2">
<div class="swiper-wrapper">
<div class="swiper-slide">Slide 1</div>
<div class="swiper-slide">Slide 2</div>
<div class="swiper-slide">Slide 3</div>
</div>
<div class="swiper-pagination"></div>
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
<div class="swiper-scrollbar"></div>
</div>
- swiper-pagination:スライドの下に●●●みたいなページネーションを付けます
- swiper-button-prev、swiper-button-next:<>みたいな左右ボタンを設置します
- swiper-scrollbar:段々スクロールバーの幅が増えてく感じの割合のようなページネーションがつきます
JS追加
const swiper2 = new Swiper('.swiper2',{
});
まずは、ベースのjsを設置。
const swiperだったのは、2つ目なのでconst swiper2にします。
ちなみにconstは、書き換えたくない変数の宣言。書き換えできる奴はvarですね。
つづいて、ページャー等をオプションに記載していきます。
const swiper2 = new Swiper('.swiper2',{
pagination: {
el: '.swiper-pagination',
},
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
scrollbar: {
el: '.swiper-scrollbar',
},
});
paginationのelementはこのclassみたいにそれぞれ要素はこれ、と指定していくだけで、デフォルトは動きます。
swiperのclassを読み込んでいるので、デフォルトのスタイルもデフォルトのclassで設定していればつきます。
classやcssで適宜実装するページに合わせていけますね。
本日はここまで!