移動端的左右滑動DEMO，解決了左右滑動而不能上下滑動的事件衝突
阿新 • • 發佈：2019-01-28
移動端經常使用到左右滑動，又需要上下滑動，一些外掛會出現事件衝突，使用swiper外掛很方便程式碼如下
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>移動端左右滑動DEMO</title> <link href="http://cdn.bootcss.com/Swiper/3.3.1/css/swiper.min.css" rel="stylesheet"> <!--Swiper3.0.4--> <style> * { margin: 0; padding: 0; } .blue-slide { background: #4390EE; } .red-slide { background: #CA4040; } .orange-slide { background: #FF8604; } .swiper-slide { line-height: 600px; color: #fff; font-size: 36px; text-align: center; } </style> </head> <body> <div>本例子在console中可以看到索引頁</div> <div class="swiper-container"> <div class="swiper-wrapper"> <div class="swiper-slide blue-slide">第一頁</div> <div class="swiper-slide red-slide">第二頁</div> <div class="swiper-slide orange-slide">第三頁</div> </div> </div> <script src="http://cdn.bootcss.com/Swiper/3.3.1/js/swiper.min.js"></script> <script type="text/javascript"> var mySwiper = new Swiper('.swiper-container',{ loop: true, autoplay: 4000, onSlideChangeEnd:function(swiper){ console.log(swiper.activeIndex); } }); </script> </body> </html>