swiper常用选项

  <script>
    var swiper = new Swiper('.swiper-container', {
　　　 reverseDirection: true,        //反向轮播   默认：false
　　　 disableOnInteraction: false,  //true: 触碰后自动切换停止  false: 触碰后自动切换也不会停止
　　　 virtualTranslate : true,     //有缓动效果的滑动。
      direction : 'vertical',     //切换方向  horizontal：横向切换  vertical：竖向切换
      spaceBetween: 30,     //swiper-slide 之间的距离
      slidesPerView : 2,    //显示几个
      slidesPerGroup : 1,   //切换几个
      loop : true,          // 环路
      //时间
      speed:300,
      autoplay : {
        delay:3000
      },
      // 如果需要分页器
      pagination: {
        el: '.swiper-pagination',
        clickable: true,
      },
      // 如果需要前进后退按钮
      navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
      },
      // 如果需要滚动条
      scrollbar: {
        el: '.swiper-scrollbar',
      },

    });
  </script>

  <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 class="swiper-slide">Slide 4</div>
      <div class="swiper-slide">Slide 5</div>
      <div class="swiper-slide">Slide 6</div>
      <div class="swiper-slide">Slide 7</div>
      <div class="swiper-slide">Slide 8</div>
      <div class="swiper-slide">Slide 9</div>
      <div class="swiper-slide">Slide 10</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>