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     });
  • 相关阅读:
    python爬虫headers设置后无效解决方案
    idea建立web项目servlet映射的地址/jsp访问不到
    bootstrap栅格系统错位问题
    python2 python3共存解决方案
    Springboot+Thymeleaf框架的button错误
    星空雅梦
    星空雅梦
    星空雅梦
    星空雅梦
    星空雅梦
  • 原文地址:https://www.cnblogs.com/Millet-23/p/9638698.html
Copyright © 2011-2022 走看看