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">