zoukankan      html  css  js  c++  java
  • swiper设置点击某个切换项之后,不进行切换

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
    
        <link rel="stylesheet" href="dist/css/swiper.css">    
        <script src="dist/js/swiper.js"> </script>  
    
        <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: 100%;
        }
    
        .swiper-slide {
          text-align: center;
          font-size: 18px;
          background: #fff;
    
          /* Center slide text vertically */
          display: -webkit-box;
          display: -ms-flexbox;
          display: -webkit-flex;
          display: flex;
          -webkit-box-pack: center;
          -ms-flex-pack: center;
          -webkit-justify-content: center;
          justify-content: center;
          -webkit-box-align: center;
          -ms-flex-align: center;
          -webkit-align-items: center;
          align-items: center;
        }
      </style>
      
    </head>
    <body>
        
    
    <!-- Swiper -->
      <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>
        <!-- Add Pagination -->
        <div class="swiper-pagination"></div>
      </div>
    
    
      <!-- Initialize Swiper -->
      <script>
        var swiper = new Swiper('.swiper-container', {
            direction: 'vertical',
          pagination: {
            el: '.swiper-pagination',
            clickable: true,
          },
        });
    
        swiper.on('slideChangeTransitionStart', function () {
            let previousIndex = swiper.previousIndex;
            let swiperIndex = swiper.activeIndex;
            console.log(previousIndex)
            if(swiperIndex == 1){
                swiper.slideTo(previousIndex)
            }
        });
      </script>
    
    </body>
    </html>

    现在的效果是,点击第二个小圆点是无效的

    注意:swiper4以上有效

  • 相关阅读:
    advanceInstaller安装文件的ICON
    advanceInstaller制作中文安装界面
    vc对话框程序运行时隐藏
    VC++6.0 打印调试信息
    js使用正则表达式实现文本框只能输入数字和小数点
    Flexbox制作CSS布局实现水平垂直居中
    微信js SDK接口
    QQ JS_SDk相关功能接口
    github代码管理工具的使用方法
    webpack打包压缩工具的使用方法
  • 原文地址:https://www.cnblogs.com/chenyingying0/p/13952845.html
Copyright © 2011-2022 走看看