swiper的使用

swiper作为前端常用的轮播插件，使用方法也非常简单。

1，首先在页面上引入swiper的js文件和css文件。

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

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

2，在body中写入swiper的规定代码

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

3，在script里编写swiper初始化的js代码

 //轮播初始化
        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
        });

4，轮播的样式可以根据class修改

/* 初始化样式 begin */
html {
  font-size: 62.5%; }

body, div, span, a, ul, ol, li, p, label, h1, h2, h3, h4, h5, h6, form, fieldset, table, th, td, img, input, button, textarea, select {
  margin: 0;
  padding: 0;
  border: 0;
  box-sizing: border-box;
  word-break: break-all;
  cursor: default; }
ul, ol, li {
  list-style: none; }

*, *::after, *::before {
  box-sizing: border-box; }

/* 初始化样式 end */

/* swiper begin */
#cbook_swiper {
  height: 330px;
  /*自定义左右按钮样式*/ }
  #cbook_swiper .swiper-wrapper {
    padding: 0; }
    #cbook_swiper .swiper-wrapper .swiper-slide {
      text-align: center; }
  #cbook_swiper .swiper-pagination .swiper-pagination-bullet {
    background-color: #ccc; }
    #cbook_swiper .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active {
      background-color: #dd3c3c; }
  #cbook_swiper #prev {
    width: 30px;
    height: 60px;
    background: url("../../../img/cbook_icons_01.png") 0 0 no-repeat; }
  #cbook_swiper #next {
    width: 30px;
    height: 60px;
    background: url("../../../img/cbook_icons_01.png") -30px 0 no-repeat; }

/* swiper end */

其中，

#cbook_swiper .swiper-wrapper {
    padding: 0; }这句代码用于解决移动端显示bug。
具体代码可以去我的github地址下载

https://github.com/itxiaoxiaosu/demo/tree/master/myWeb。