swiper使用方法

swiper作为前端常用的轮播插件，使用方法也比较简单，这里简单的描述一下。

首先，效果图是这样的。

然后页面里要引入jquery和swiper的js，css文件。（路径根据自己的来）

<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>

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

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

注意jquery要在swiper.js的前面引入。

接着是轮播代码

<div class="swiper-container" id="cbook_swiper">
    <ul class="swiper-wrapper">
        <li class="swiper-slide">
            <img src="img/cbookImg_03.png">
        </li>
        <li class="swiper-slide">
            <img src="img/cbookImg_03.png">
        </li>
        <li class="swiper-slide">
            <img src="img/cbookImg_03.png">
        </li>
    </ul>
    <!-- 分页器 -->
    <div class="swiper-pagination"></div>
    <!-- 导航按钮 -->
    <div class="swiper-button-prev" id="prev"></div>
    <div class="swiper-button-next" id="next"></div>
</div>

这里要注意class是不能修改名称的。分页器和导航点根据自己需要添加。

当然，我们必须在js里初始化swiper。

//轮播初始化
var mySwiper = new Swiper('.swiper-container', {
    pagination:'.swiper-pagination',//底部点赋予点击效果
    nextButton:'.swiper-button-next',//前进后退按钮赋予点击效果
    prevButton:'.swiper-button-prev',
    paginationClickable:true,
    spaceBetween:30,
    centererSlides:true,
    autoplay:2500,//是否自动播放
    autoplayDIsableOnInteraction:false
});

最后就是修改轮播样式，实现自己想要的结果。

/* swiper begin */
#cbook_swiper{
  height: 330px;
  .swiper-wrapper{
    padding:0;//解决移动端图片显示布局中bug
    .swiper-slide{
      text-align: center;
    }
  }
  .swiper-pagination .swiper-pagination-bullet{
    background-color: #ccc;
    &.swiper-pagination-bullet-active{
      background-color: #dd3c3c;
    }
  }
  /*自定义左右按钮样式*/
  #prev{
    width: 30px;
    height: 60px;
    background:url('#{$bgPath}cbook_icons_01.png') 0 0 no-repeat;
  }
  #next{
    width: 30px;
    height: 60px;
    background:url('#{$bgPath}cbook_icons_01.png') -30px 0 no-repeat;
  }
}
/* swiper end */

具体代码可以到我的github下载。点击打开链接

猜你喜欢