在一个html里用两个swiper,如何在swiper中使用两个轮播效果？

一个页面中引用多个Swiper可以给每个Swiper加上ID或Class区分，要保留默认的类名swiper-container。

相同页面，轮播图1

相同页面，轮播图2

HTML

...

iPhone6

外屏碎(显示正常)

维修咨询

...

JS

var swiper0 = new Swiper ('#swiper0', {

loop: true,// 如果需要分页器

pagination: {

el: '.swiper-pagination',

},

// 如果需要前进后退按钮

navigation: {

nextEl: '.swiper-button-next',

prevEl: '.swiper-button-prev',

},

})

var swiper1 = new Swiper ('#swiper1', {

loop: true,

slidesPerView: 3,

spaceBetween: 30,

pagination: {

el: '.swiper-pagination',

clickable: true,

},

// 如果需要前进后退按钮

navigation: {

nextEl: '.swiper-button-next',

prevEl: '.swiper-button-prev',

},

})

备注：

new Swiper(swiperContainer, parameters)用于初始化一个Swiper，返回初始化后的Swiper实例。

swiperContainer : 必选，HTML元素或者string类型，Swiper容器的css选择器，例如“.swiper-container”。

parameters : 可选，参见配置选项。

参考官网网址：http://www.swiper.com.cn/api/start/2014/1218/140.html

推荐阅读