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

2019-03-24 610 1526

スライダー（スライドショー）のライブラリは色々ありますが、今回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の公式サイト