現(xiàn)在很多前端工程師會被要求寫滑動，swiper就是這樣一款滑動特效插件，面向手機(jī)、平板、電腦等移動終端。但是在寫頁面時(shí)難免會使用多個(gè)swiper插件，在我們最近的項(xiàng)目里愛加海外月子中心就出現(xiàn)了這個(gè)情況，那么應(yīng)該如何使用呢？

swiper是通過共用的class（swiper-container）來實(shí)現(xiàn)效果，所以在共用的class前面加上 父元素（你可以定義一個(gè)class或id，如此次的.banner、#case）來區(qū)分。

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,
 	 });

重點(diǎn)就在于這個(gè)類，如果一個(gè)頁面使用多個(gè)swiper插件時(shí)，要把各自的父級類名加上才能不沖突。改完 var，記得修改下 pagination 值，其他黑色字體部分，根據(jù)你的需求設(shè)置即可。

演示地址：http://www.xcyouyuan.com.cn/d/demo/swiper/