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>
时间： 2024-08-05 00:08:41