zoukankan      html  css  js  c++  java
  • swiper 点击切换,拖动切换后继续自动轮播

    HTML结构

    <div className="swiper-container main_meeting">
      <div className="swiper-wrapper">
        <div className="swiper-slide">Slide 1</div>
        <div className="swiper-slide">Slide 2</div>
        <div className="swiper-slide">Slide 3</div>
        <div className="swiper-slide">Slide 4</div>
      </div>
    <div class="swiper-pagination swiper-pagination-banner"></div>
    </div>

    Swiper.js设置

     1 var banner = new Swiper('.swiper-banner', {
     2         //分页,多个分页可以使用不同的class名
     3         pagination: '.swiper-pagination-banner',
     4         //点击切换
     5         paginationClickable: true,
     6         //自动播放时间
     7         autoplay:5000,
     8         //切换速度,即slider自动滑动开始到结束的时间(单位ms),也是触摸滑动时释放至贴合的时间。
     9         speed:2000,
    10         //复制slide,看起来是循环的
    11         loop:true,
    12         //用户操作swiper之后,是否禁止autoplay.默认为true:停止。
    13         autoplayDisableOnInteraction:false,
    14         //拖动释放时不会输出信息,阻止click冒泡。拖动Swiper时阻止click事件。
    15         preventLinksPropagation:true
    16     });
  • 相关阅读:
    HDU 1022 Train Problem I
    HDU 1702 ACboy needs your help again!
    HDU 1294 Rooted Trees Problem
    HDU 1027 Ignatius and the Princess II
    HDU 3398 String
    HDU 1709 The Balance
    HDU 2152 Fruit
    HDU 1398 Square Coins
    HDU 3571 N-dimensional Sphere
    HDU 2451 Simple Addition Expression
  • 原文地址:https://www.cnblogs.com/Millet-23/p/9638698.html
Copyright © 2011-2022 走看看