咨询电话:
15628812133
24
2017/06

一个页面如何使用多个swiper插件?

发布时间:2017-06-24 17:02:27
发布者:jiangbing
浏览量:
0

现在很多前端工程师会被要求写滑动,swiper就是这样一款滑动特效插件,面向手机、平板、电脑等移动终端。但是在写页面时难免会使用多个swiper插件,在我们最近的项目里爱加海外月子中心就出现了这个情况,那么应该如何使用呢?

blob.png

swiper是通过共用的class(swiper-container)来实现效果,所以在共用的class前面加上 父元素(你可以定义一个class或id,如此次的.banner、#case)来区分。

var mySwiper = new Swiper('.banner .swiper-container',{
    loop: true,
	autoplay:3000,
    autoplayDisableOnInteraction: false,
	speed:500,
	// 如果需要分页器
    pagination: '.banner .swiper-pagination',
	paginationClickable: true,
	grabCursor : true,
	nextButton: '.arrow-right',
    prevButton: '.arrow-left',
	parallax:true,
var mySwiper = new Swiper('#case .swiper-container',{
    loop: true,
	autoplay:3000,
    autoplayDisableOnInteraction: false,
	speed:500,
	// 如果需要分页器
    pagination: '#case .swiper-pagination',
	paginationClickable: true,
	grabCursor : true,
	nextButton: '.arrow-right',
    prevButton: '.arrow-left',
	parallax:true,
 	 });

blob.png

blob.png

重点就在于这个类,如果一个页面使用多个swiper插件时,要把各自的父级类名加上才能不冲突。改完 var,记得修改下 pagination 值,其他黑色字体部分,根据你的需求设置即可。

演示地址:https://www.cnwenhui.cn/d/demo/swiper/

关键词:
返回列表