目录

swiper

swiper

同一个页面面使用两个swiper轮播

html代码

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<div class="swiper-container banner">
	<div class="swiper-wrapper">
		<div class="swiper-slide">
		</div>
		<div class="swiper-slide">
		</div>
		<div class="swiper-slide">
		</div>
	</div>
	<div class="swiper-pagination banner">
	</div>
</div>
<div class="swiper-container case ">
	<div style="height:51px;">
	</div>
	<div class="swiper-wrapper">
		<div class="swiper-slide">
		</div>
		<div class="swiper-slide">
		</div>
		<div class="swiper-slide">
		</div>
	</div>
	<div class="swiper-pagination case">
	</div>
</div>

js代码:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
$(function() {
	var mySwiper = $('.banner').swiper({
		mode: 'horizontal',
		loop: true,
		autoResize: true,
		pagination: '.banner .swiper-pagination',
		paginationClickable: true,
		autoplay: 3000,
	});
	var swiper = $('.case').swiper({
		pagination: '.case .swiper-pagination',
		slidesPerView: 4,
		slidesPerColumn: 2,
		paginationClickable: true,
		spaceBetween: 20
	});
})
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
声明swiper变量时 加一个同级元素加以区别即

var mySwiper = $('.banner')

var swiper = $('.case')

然后就是更改pagination的默认值用以区别显示的页面控件

pagination:'.banner'

pagination: '.case',


这就是基本的修改方式值得一提的是swiper在使用中不予bootstrap冲突

单个swiper的使用

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<script src="https://cdn.bootcss.com/jquery-weui/1.2.0/js/swiper.min.js">
</script>
<script src="https://cdn.bootcss.com/jquery-weui/1.2.0/js/city-picker.min.js">
</script>
<div class="swiper-container" data-space-between='10' data-pagination='.swiper-pagination'
data-autoplay="1000">
<div class="swiper-wrapper">

	<div class="swiper-slide">
		<a href="#">
			<img width="100%" height="180px" src="#" alt="">
		</a>
	</div>
	
</div>
<div class="swiper-pagination">
</div>
</div>
<script>
$(".swiper-container").swiper({
	loop: true,
	autoplay: 3000
});
</script>