前回はスライダーを作ってみたところまでですので、その下にページャー等を設置したスライダーを作っていきます。

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で適宜実装するページに合わせていけますね。

実行結果

本日はここまで！