如何在swiper中使用两个轮播效果?

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

swiper轮播图

相同页面,轮播图1

swiper轮播图

相同页面,轮播图2

HTML

<div class="swiper-container" id="swiper0">
<div class="swiper-wrapper">
<div class="swiper-slide" style="background-image:url(./style/b01.jpg)"></div>
...
</div>
<!-- 如果需要导航按钮 -->
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
</div>
<div class="swiper-container" id="swiper1">
<div class="swiper-wrapper">
<div class="swiper-slide">
<a href="/swt/">
<div class="hotScrollItem">
<span class="mould">iPhone6</span>
<span class="fault">外屏碎(显示正常)</span>
<div class="lineDiv"><span></span>
</div><span class="money">维修咨询</span>
</div>
</a>
</div>
...
</div>
<!-- 如果需要导航按钮 -->
<div class="swiper-button-prev swiper-button-black"></div>
<div class="swiper-button-next swiper-button-black"></div>
</div>

JS

<script>
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',
},
})
</script>
备注:

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

推荐阅读

  1. 如何给swiper轮播图片加超链接?
  2. 如何更改swiper中箭头的颜色及大小?
  3. Swiper4.x使用方法
  4. Ubuntu下Apache开启Rewrite模块
  5. 重启阿帕奇( apache )命令
  6. 织梦(dedecms)调用不到{dede:global.cfg_keywords/}等自定义标签值
  7. 如何设置SuiteCRM通过IP访问?【不通过域名访问SuiteCRM】
  8. WordPress上添加Description(描述)和Keywords(关键词)标签代码

发表评论

电子邮件地址不会被公开。 必填项已用*标注