Swiper.jsのページネーションのすべて

swiper pagination

swiper.jsのページネーションはとても充実しており、オプションを変更するだけで様々なページネーションを作成できます。(一部どうしてもCSSの必要あり)
当記事では様々なSwiperページネーションとその実装方法をデモ付きで紹介します。



通常のSwiper.jsでのスライダーの作成はご存じの前提で進めさせていただきますので、Swiper.jsを初めて使う方はこちらから先に参考いただければと思います。
Swiper.jsでスライダーを実装する





通常のスライダーを作成

わかりやすいように、まずは基本となるスライダーを作成します。

<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,                             
        pagination: {
            el: '.swiper-pagination',
        },                
        navigation: {                       
            nextEl: ".swiper-button-next",
            prevEl: ".swiper-button-prev",
        },
    })
</script>

通常のスライダーができました。これを基準に様々なページネーションを作成していきましょう。

slide_image1
slide_image2
slide_image3





clickable:true ページネーションをクリックを可能にする

Swiperのページネーションはデフォルトではクリックできないようになっています。
下記のようにclickableオプションを追加することにより、ページネーションのクリックでスライドを動かせるようになります。

const swiper = new Swiper('.sample-slider', {
    loop: true,                         
    pagination: {                       
        el: '.swiper-pagination',
        clickable: true,            //追加
    },
    navigation: {                       
        nextEl: ".swiper-button-next",
        prevEl: ".swiper-button-prev",
    },
})

ページネーションをクリックしてスライドが動けばOKです。

slide_image1
slide_image2
slide_image3





type: ‘progressbar’ ページネーションをプログレスバーにする

下記のように type: ‘progressbar’と指定することで、ページネーションをプログレスバーにできます。

const swiper = new Swiper('.sample-slider', {
    loop: true,                         
    pagination: {                      
        el: '.swiper-pagination',
        type: 'progressbar',        //追加
    },
    navigation: {                       
        nextEl: ".swiper-button-next",
        prevEl: ".swiper-button-prev",
    },
})

ページネーションがプログレスバーになりました。

slide_image1
slide_image2
slide_image3




プログレスバーを一番下に置きたい場合は、以下のCSSを追加する事で実現できます。

.sample-slider .swiper-pagination{
    top:initial;
    bottom:0;
}
slide_image1
slide_image2
slide_image3





progressbarOpposite: true ページネーションを縦方向のプログレスバーにする

type: ‘progressbar’ + progressbarOpposite: trueでページネーションを縦方向のプログレスバーにできます。

const swiper = new Swiper('.sample-slider', {
    loop: true,                         
    pagination: {                       
        el: '.swiper-pagination',
        type: 'progressbar',            //追加
        progressbarOpposite: true,      //追加
    },
    navigation: {                       
        nextEl: ".swiper-button-next",
        prevEl: ".swiper-button-prev",
    },
})

ページネーションが縦方向のプログレスバーになりました。

slide_image1
slide_image2
slide_image3





type: ‘fraction’ ページネーションを分数表記にする

type: ‘fraction’ を追加することでページネーションを分数表記にできます。

const swiper = new Swiper('.sample-slider', {
    loop: true,                         
    pagination: {                       
        el: '.swiper-pagination',
        type: 'fraction',           //追加
    },
    navigation: {                       
        nextEl: ".swiper-button-next",
        prevEl: ".swiper-button-prev",
    },
})

ページネーションが分数表記になりました。

slide_image1
slide_image2
slide_image3





renderBullet ページネーションを数字にする

renderBulletオプションにクロージャを指定して、ページネーションを数字にします。
ここは見た目の調整にどうしてもCSSが必要になります。

<style>
    .sample-slider .swiper-pagination-bullet{   /*追加*/
        width: 25px;                            /*追加*/
        height: 25px;                           /*追加*/
        display: inline-flex;                   /*追加*/
        align-items: center;                    /*追加*/
        justify-content: center;                /*追加*/
        color: #fff;                            /*追加*/
    }                                           /*追加*/
</style>


<script>
    const swiper = new Swiper('.sample-slider', {
        loop: true,                         
        pagination: {                       
            el: '.swiper-pagination',
            renderBullet: function (index, className) {                 //追加
                return `<span class="${className}">${index + 1}</span>` //追加
            },                                                          //追加
        },
        navigation: {                       
            nextEl: ".swiper-button-next",
            prevEl: ".swiper-button-prev",
        },
    })
</script>

ページネーションが数字表記になりました。

slide_image1
slide_image2
slide_image3





dynamicBullets:true ページネーションをダイナミックに

dynamicBullets: trueを追加することでページネーションをダイナミックにできます。
アクティブスライドのページネーションが大きくなります。

const swiper = new Swiper('.sample-slider', {
    loop: true,                         
    pagination: {                       
        el: '.swiper-pagination',
        dynamicBullets: true,       // 追加
    },
    navigation: {                       
        nextEl: ".swiper-button-next",
        prevEl: ".swiper-button-prev",
    },
})
slide_image1
slide_image2
slide_image3





hideOnClick:true ページネーションの表示・非表示を切り替えられるようにする

hideOnClick: trueを追加することで、クリックでページネーションの表示・非表示を切り替えを行えるようになります。

const swiper = new Swiper('.sample-slider', {
    loop: true,
    pagination: {
        el: '.swiper-pagination',
        hideOnClick: true,          // 追加
    },
    navigation: {
        nextEl: ".swiper-button-next",
        prevEl: ".swiper-button-prev",
    },
})


スライドをクリックするとページネーションが非表示になります。もう一度クリックすると表示されます。







以上、swiper.jsのオプションで実装できる様々なページネーションについての紹介でした。



ページネーションを任意の画像でカスタマイズしたい場合は下記が参考になるかと思われます。
【Swiper】ページネーション(ドット)を任意の画像でカスタマイズする

スポンサーリンク

You can subscribe by SNS

スポンサーリンク

コメント

コメントを残す

*