欢迎光临
我的个人博客网站

swiper设置点击某个切换项之后,不进行切换 -cyy

<!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>

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

swiper设置点击某个切换项之后,不进行切换 -cyy

 

注意:swiper4以上有效

赞(0) 打赏
未经允许不得转载:张拓的天空 » swiper设置点击某个切换项之后,不进行切换 -cyy
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

专业的IT技术经验分享 更专业 更方便

联系我们本站主机

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏