如何在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. Google Search Console移动设备易用性报错修复【已解决】
  5. 熊掌号中天级收录和周级收录的区别?
  6. 如何在没有插件的情况下为WordPress中的外部链接添加nofollow
  7. 在wordpress通过代码实现百度主动推送|手工提交|实时推送
  8. wordpress熊掌号站点天级收录链接提交代码【不用插件实现】

发表评论

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