現(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è)置即可。
關(guān)鍵詞:
