jquery不要のスライダーswiperでページャーとナビゲーションが表示されない!即決

2019-03-24


スライダー(スライドショー)のライブラリは色々ありますが、今回swiperを使用した際に、
ドットアイコンのページャー(ページネイション)が全然表示されなかったので調べてみると…

まず、これはHTML側で普通にネットによく転がっているコードです。
これに誤りはありませんでした。
<div class="swiper-container">
    <div class="swiper-wrapper">
        <div class="swiper-slide"><img src="/img/sample1.jpg" alt=""></div>
        <div class="swiper-slide"><img src="/img/sample2.jpg" alt=""></div>
        <div class="swiper-slide"><img src="/img/sample3.jpg" alt=""></div>
    </div>
    <div class="swiper-pagination"></div>
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>
</div>
次は、スクリプト側のコードですが、これだとスライダーは動作するものの、ページャーが表示されませんでした。
//動作しなかったswiperの古い記述の仕方
<script>
var swiper = new Swiper('.swiper-container', {
    pagination: '.swiper-pagination',
    nextButton: '.swiper-button-next',
    prevButton: '.swiper-button-prev',
    effect: 'fade',
    loop: true,
    autoplay: 3000
});
</script>
どうやら上記は古いswiperのバージョンの記述のよう。swiperが新しいバージョンの場合は下記のコードだと無事に動作しました。
<script>
//swiperのバージョンによっては下記が正解のコード
var swiper = new Swiper('.swiper-container', {
    pagination: {
        el: '.swiper-pagination',
        clickable: true,
    },
    navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
    }
});
</script>
バージョンアップによる記述の改変は、ネットの古い情報が邪魔してしまうのでやっかいなものですね。

swiperの公式サイト

この記事がお役に立てましたら是非シェアのご協力お願いします。