swiper3与swiper4不同写法，引起左右按钮功能失效；同一页面使用多个swiper轮播，

最新推荐文章于 2023-03-02 17:44:28 发布

Celeste of jesus

最新推荐文章于 2023-03-02 17:44:28 发布

阅读量816

点赞数

分类专栏： JS/jQuery 文章标签： html css html5

本文链接：https://blog.csdn.net/Celeste_ming/article/details/120264214

版权

本文介绍了swiper3与swiper4的写法差异，指出这些差异可能导致的左右滑动按钮和分页器功能失效问题。同时，提供了在同一页面上创建多个swiper实例的示例代码，可以直接使用。

摘要由CSDN通过智能技术生成

swiper3与swiper4的不同写法

swiper3与swiper4写法不同，因此引起左右按钮或小圆点分页器功能失效（无语，为什么要创造那么多写法，哭…）

swiper3
swiper3基本写法
swiper4
swiper4基本写法
更多不同写法见官网演示案例：
swiper3：https://3.swiper.com.cn/demo/index.html
swiper4：https://www.swiper.com.cn/demo/index.html

同一页面两个swiper案例，复制可直接使用

<link rel="stylesheet" href="https://www.huatu.com/images/2018css/swiper.min.css" />

<div class="swiper-container box1">
    <div class="swiper-wrapper">
      <div class="swiper-slide">
			<a href=""><img src="https://u3.huatu.com/j