画像スライダー swiper.js覚書

swiper.jsでハマったことを次回忘れないように

<div class="swiper-container">
    <div class="swiper-wrapper">
        <div class="swiper-slide">
            <img src="img/makoto01.jpg" width="100%" height="auto">
        </div>
        <div class="swiper-slide">
            <img src="img/makoto02.jpg" width="100%" height="auto"> </div>
    </div>
    <div class="swiper-pagination  swiper-pagination-white"></div>
    <div class="swiper-button-prev swiper-button-white"></div>
    <div class="swiper-button-next swiper-button-white"></div>
</div>

<script type="text/javascript" src="js/swiper.min.js"></script>

<script>
var swiper = new Swiper('.swiper-container', {
    autoplay: 6000,
    speed: 600,
    loop: true,
    effect: 'slide',
    pagination: '.swiper-pagination',
    paginationClickable: true,
    nextButton: '.swiper-button-next',
    prevButton: '.swiper-button-prev',
});
</script>

jsでpaginationやnextButtonあたりの記述を忘れないこと。htmlで書いただけでは表示されない。

nextButton: '.swiper-button-next',
prevButton: '.swiper-button-prev',

↑特にこれを書かないと、矢印クリックしても画面遷移しません。

オプションについて
http://reiwinn-web.net/2016/11/30/swiper-js-01/