swiper轮播简单使用，为了粘贴

需要引入

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

<script src="js/swiper.min.js"></script>

html

<div class="swiper-container tab1" id="swiper-container">

    <ul class="swiper-wrapper">

        <li class="swiper-slide">

            <img src="img/xh_img1.png" alt="">

        </li>

        <li class="swiper-slide">

            <img src="img/xh_img1.png" alt="">

        </li>

    </ul>

<!-- 如果需要分页器 -->

    <div id="swiper-pagination" class="swiper-pagination"></div>

<!-- 如果需要导航按钮 -->

    <!-- <div class="swiper-button-prev"></div> -->

    <!-- <div id="swiper-button-next" class="swiper-button-next"></div> -->

</div>

js

var mySwiper = new Swiper('#swiper-container', {

el: '#swiper-container',

freeMode: false,

//effect : 'fade',

loop: true,

// 如果需要分页器

pagination: '#swiper-pagination',

// 如果需要前进后退按钮

nextButton: '#swiper-button-next',

prevButton: '.swiper-button-prev',

 

// 自动轮播间隔数

autoplay: 3000,

// 手动滑动后恢复自动滑动

autoplayDisableOnInteraction: false,

});