使用swiper.js创建嵌套的swiper

相信在项目中使用过swiper.js的同学会跟我一样，觉得这个软件真的很好用。首先API调用简单，其次就是他的官方文档写得非常之详细，非常容易上手。
自己在项目中使用swiper.js很长时间了，这里根据自己的一些经验和心得对swiper.js进行总结。

swiper.js官网

官网地址：https://www.swiper.com.cn/

官网快捷链接：Swiper4使用方法 、Swiper4的API文档

嵌套两个或多个siwper

根据官方文档，我们创建一个swiper是非常简单的，但是如何创建两个swiper，这对于一些新手小白来说可能比较迷茫。这里先给出代码，然后再进行解释。

示例代码

• 下载并引入swiper文件：

<link rel="stylesheet" href="swiper-4.3.3.min.css"> <script src="swiper-4.3.3.min.js"></script> 

• HTML代码：

<!-- 定义父swiper --> <div class="swiper-container first-one"> <div class="swiper-wrapper"> <div class="swiper-slide">我是父亲swiper的第一个slide</div> <div class="swiper-slide">我是父亲swiper的第二个slide</div> <div class="swiper-slide">我是父亲swiper的第三个slide</div> <div class="swiper-slide"> <!-- 定义嵌套的子swipe --> <div class="swiper-container second-one"> <div class="swiper-wrapper"> <div class="swiper-slide">我是儿子swiper的第一个slide</div> <div class="swiper-slide">我是儿子swiper的第二个slide</div> <div class="swiper-slide">我是儿子swiper的第三个slide</div> <div class="swiper-slide">我是儿子swiper的第四个slide</div> </div> </div> </div> </div> </div> 

• CSS代码：

*{ padding: 0; margin: 0; } .swiper-container{ width: 100vw; /*100vw的意思是宽度和浏览器窗口的宽度一样*/ height: 100vh; /*100vh的意思是宽度和浏览器窗口的高度一样*/ } 

• JavaScript代码：

var first_swiper=new Swiper('.first-one',{ // 这里可以不写任何东西，swiper会按照默认参数进行初始化 }); var second_swiper=new Swiper('.second-one',{ // 这里可以不写任何东西，swiper会按照默认参数进行初始化 }); 

使用总结

• 其实创建嵌套swiper很简单，就是在一个已经创建好的swiper中，确定我们在哪一个slide中创建我们的第二个swiper。然后就按照我们创建第一个swiper的样子来书写HTML代码。
• HTMl代码书写好之后，我们就要使用JavaScript脚本来初始化我们的两个swiper。这个时候有的同学就会问，我如何来区分两个swiper呢？注意看我们的HTML代码中，我分别给两个swiper加了一个class="fitst-one"和class="second-one"。这样我们就可以区分两个swiper，然后在JavaScript脚本中初始化swiper的时候，就是用这两个class分别来初始化两个swiper。
• 这样，我们便可以成功创建两个嵌套的swiper。如果你要创建多个嵌套的swiper，也采用类似的方法，但是不建议嵌套过多的swiper，根据我的个人经验，可能会出现一些bug。

注意事项

• 仔细观察上面给出的HTML代码，我们是将子swiper嵌套在父swiper的最后一个slide中，这样在初始化swiper的时候，不进行额外的配置，也不会有什么问题。
• 但是如果我们将子swiper嵌套在父swiper的中间的slide中，这个时候我们只能看到子swiper的第一个slide。例如我们的HTML代码采用下面的写法：

<!-- 定义父swiper --> <div class="swiper-container first-one"> <div class="swiper-wrapper"> <div class="swiper-slide">我是父亲swiper的第一个slide</div> <div class="swiper-slide"> <!-- 定义嵌套的子swipe --> <div class="swiper-container second-one"> <div class="swiper-wrapper"> <div class="swiper-slide">我是儿子swiper的第一个slide</div> <div class="swiper-slide">我是儿子swiper的第二个slide</div> <div class="swiper-slide">我是儿子swiper的第三个slide</div> <div class="swiper-slide">我是儿子swiper的第四个slide</div> </div> </div> </div> <div class="swiper-slide">我是父亲swiper的第二个slide</div> <div class="swiper-slide">我是父亲swiper的第三个slide</div> </div> </div> 

• 这个时候，我们在滑动slide的时候，分别会看到下面的文字：

  • 我是父亲swiper的第一个slide
  • 我是儿子swiper的第一个slide
  • 我是父亲swiper的第二个slide
  • 我是父亲swiper的第三个slide

• 这个时候是我们的初始化的问题，如果想看到子swiper全部的slide，那么需要在初始化子swiper的时候，额外配置一些选项，即设置nested:true。用于嵌套相同方向的swiper时，当切换到子swiper时停止父swiper的切换。

var first_swiper=new Swiper('.first-one',{ // 这里可以不写任何东西，swiper会按照默认参数进行初始化 }); var second_swiper=new Swiper('.second-one',{ nested:true });