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

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

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

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

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