swiper插件的使用

1.首先加载插件，需要用到的文件有swiper.min.js和swiper.min.css文件。

 （如果你的页面加载了jQuery.js或者zepto.js，你可以选择使用更轻便的swiper.jquery.min.js。）

 

2.html页面

<div class="swiper-container">
    <div class="swiper-wrapper">
        <div class="swiper-slide">Slide 1</div>
        <div class="swiper-slide">Slide 2</div>
        <div class="swiper-slide">Slide 3</div>
    </div>
    <!-- 如果需要分页器 -->
    <div class="swiper-pagination"></div>
    
    <!-- 如果需要导航按钮 -->
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>
    
    <!-- 如果需要滚动条 -->
    <div class="swiper-scrollbar"></div>
</div>
导航等组件可以放在container之外

 <!-- Swiper 开始 -->
        <div class="swiper-container">
            <div class="swiper-wrapper">
                <div class="swiper-slide"><img src="../../ver1.0/images/banner.jpg"/></div>
                <div class="swiper-slide"><img src="../../ver1.0/images/banner.jpg"/></div>
                <div class="swiper-slide"><img src="../../ver1.0/images/banner.jpg"/></div>
                <div class="swiper-slide"><img src="../../ver1.0/images/banner.jpg"/></div>
            </div>
            <!-- Add Pagination -->
            <div class="swiper-pagination"></div>
        </div>
        <!-- Swiper 结束 -->

3.初始化swiper

<script>        
  var mySwiper = new Swiper ('.swiper-container', {
    direction: 'vertical',
    loop: true,
    
    // 如果需要分页器
    pagination: '.swiper-pagination',
    
    // 如果需要前进后退按钮
    nextButton: '.swiper-button-next',
    prevButton: '.swiper-button-prev',
    
    // 如果需要滚动条
    scrollbar: '.swiper-scrollbar',
  })        
  </script>

/*轮播事件 开始*/
var swiper = new Swiper('.swiper-container', {
    pagination : '.swiper-pagination',
    autoplayDisableOnInteraction : false,
    autoplay : 2000,
    paginationClickable: true,
});
/*轮播事件 结束*/

 

4.修改底部分页器的样式（找到 class=swiper-pagination-bullet  和  class=swiper-pagination-bullet-active）

.swiper-pagination-bullet{
    display: inline-block;
    width: 15px;
    height: 15px;
    background: #d5d5d5;
    margin-left: 10px;
    -webkit-border-radius: 0px;
    -moz-border-radius: 0px;
    border-radius: 0px;
    opacity: 1;
}
.swiper-pagination-bullet-active{
    background: #fe6406;
}