1. 程式人生 > >swiper輪播圖切換

swiper輪播圖切換

<!-- html輪播 -->
        <div class="swiper-container">         <div class="swiper-wrapper">             <div class="swiper-slide phone"><img src="images/3.png" alt=""></div>             <div class="swiper-slide phone"><img src="images/2.png" alt=""></div>             <div class="swiper-slide phone"><img src="images/1.png" alt=""></div>         </div>     </div>

<!-- js自動播放 -->

<script src="js/swiper-3.4.2.jquery.min.js"></script>
<script>
                var mySwiper = new Swiper ('.swiper-container', {
                    slidesPerView: 1,
                    pagination: '.swiper-pagination',
                    paginationClickable: true,
                    paginationType:'custom',
                    spaceBetween: 30,
                    autoplay:2000,
                    loop: true,
                    nextButton: '.swiper-button-next',
                    prevButton: '.swiper-button-prev'
                })

</script>

style樣式

<link rel="stylesheet" href="css/swiper-3.4.2.min.css">