swiper轮播（3张图）

style

html, body {
  position: relative;
  height: 100%;
}
body {
  background: #eee;
  font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
  font-size: 14px;
  color:#000;
  margin: 0;
  padding: 0;
}
.swiper-container {
  width: 100%;
  height: 268px;
}
.swiper-wrapper{
  width: 100%;
}
.swiper-slide img{
  display: block;
  width: 100%;
  height: 100%;
}
.swiper-slide-active{
    width: 88%!important;/*660*/
    height: 268px;
}
.swiper-slide-prev,.swiper-slide-next{
  height: 254px;
  width: 83%;
  overflow: hidden;
    margin-top: 4px;
}
.swiper-slide-prev{
  margin-left: 6%;
}

html

<div class="swiper-container swiper-container-initialized swiper-container-horizontal">
    <div class="swiper-wrapper" style="transition-duration: 0ms; transform: translate3d(0px, 0px, 0px);">
      <!-- <div class="swiper-slide swiper-slide-active" data-swiper-slide-index="0" style="width: 105px; margin-right: 30px;"><img src="img/xw1.png" alt=""></div> -->
    </div>
</div>

js

<script type="text/javascript" src = "js/jquery-2.2.4.min.js"></script>
<script src="js/swiper.min.js"></script>
<script>
  //banner轮播
  var bannerList=[
    'img/xw1.png',
    'img/xw2.png',
    'img/xw3.png',
  ];
  bannerList.forEach(function(item){
    var html='<div class="swiper-slide"><img src="'+item+'" alt=""> </div>';
    $(" .swiper-wrapper").append(html);
  })
  var swiper = new Swiper('.swiper-container', {
    slidesPerView: 3,
    spaceBetween: 10,//样式根据具体情况调，spaceBetween必须有且单位是px
	  // centeredSlides: true,
	  loop: true,
    pagination: {
      el: '.swiper-pagination',
      clickable: true,
    },
  });

</script>