swiper的使用
Posted 铜镜123
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了swiper的使用相关的知识，希望对你有一定的参考价值。
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 <link type="text/css" rel="stylesheet" href="swiper-dist/css/swiper.css" /> 7 <!-- 如果引入swiper.jquery.js，那么在这之前需要引入jquery --> 8 <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script> 9 <script src="swiper-dist/js/swiper.jquery.js"></script> 10 11 12 <!--<script src="swiper-dist/js/swiper.js"></script>--> 13 <style> 14 .swiper-container { 15 width: 600px; 16 height: 300px; 17 } 18 </style> 19 </head> 20 <body> 21 22 <div class="swiper-container contaianer"> 23 <!-- 内容部分 --> 24 <div class="swiper-wrapper"> 25 <!-- 每一页 --> 26 <div class="swiper-slide">Slide 1</div> 27 <div class="swiper-slide">Slide 2</div> 28 <div class="swiper-slide">Slide 3</div> 29 <div class="swiper-slide">Slide 4</div> 30 <div class="swiper-slide">Slide 5</div> 31 <div class="swiper-slide">Slide 6</div> 32 </div> 33 <!-- 如果需要分页器 --> 34 <div class="swiper-pagination"></div> 35 36 <!-- 如果需要导航按钮 --> 37 <div class="swiper-button-prev"></div> 38 <div class="swiper-button-next"></div> 39 40 <!-- 如果需要滚动条 --> 41 <div class="swiper-scrollbar"></div> 42 </div> 43 <!--导航等组件可以放在container之外--> 44 45 <button class="btn">按钮</button> 46 <button class="btn1">滚到第3页</button> 47 <button class="btn2">插入一页</button> 48 49 <script> 50 //常见swiper对象 51 //参数1：swiper容器选择器，或者dom对象 52 //参数2：swiper配置项 53 var con = document.querySelector(‘.swiper-container‘); 54 var mySwiper = new Swiper(con, { 55 //水平horizontal 垂直vertical 56 direction: ‘horizontal‘, 57 //循环 58 loop: true, 59 //初始页面 60 initialSlide: 1, 61 speed: 500, 62 mousewheelControl: true, 63 // autoplay: 1000, 64 // 如果需要分页器 65 pagination: ‘.swiper-pagination‘, 66 // 67 // // 如果需要前进后退按钮 68 nextButton: ‘.swiper-button-next‘, 69 prevButton: ‘.swiper-button-prev‘, 70 // 71 // // 如果需要滚动条 72 // scrollbar: ‘.swiper-scrollbar‘, 73 74 onInit: function(swiper){ 75 //swiper对象就是创建出来的mySwiper 76 alert(1) 77 console.log(‘swiper‘); 78 console.log(swiper); 79 80 }, 81 onTouchStart: function(swiper){ 82 console.log(‘碰到了swiper‘); 83 }, 84 onTouchMove: function(swiper){ 85 console.log(‘正在移动....‘); 86 }, 87 88 onSlideChangeStart: function(){ 89 console.log(‘Start‘); 90 } 91 92 93 }) 94 95 96 // mySwiper 97 98 console.log(‘mySwiper‘); 99 console.log(mySwiper); 100 101 $(‘.btn‘).on(‘click‘, function(){ 102 103 console.log(mySwiper.realIndex); 104 105 mySwiper.disableMousewheelControl(); 106 107 }) 108 109 $(‘.btn1‘).on(‘click‘, function(){ 110 111 mySwiper.slideTo(3, 200, true); 112 113 }) 114 115 $(‘.btn2‘).on(‘click‘, function(){ 116 117 document.querySelector(‘.swiper-wrapper‘).innerHTML += ‘<div class="swiper-slide">Slide ‘+7+‘</div>‘; 118 119 mySwiper.update(); 120 121 122 }) 123 124 125 126 </script> 127 128 129 130 131 </body> 132 </html>
以上是关于swiper的使用的主要内容，如果未能解决你的问题，请参考以下文章
如何使用 slick/swiper/或任何其他插件或原始代码制作以下滑块？
Swiper和Vue配合使用的问题——Vue的异步更新DOM