相信在项目中使用过swiper.js的同学会跟我一样，觉得这个软件真的很好用。首先API调用简单，其次就是他的官方文档写得非常之详细，非常容易上手。
自己在项目中使用swiper.js很长时间了，这里根据自己的一些经验和心得对swiper.js进行总结。
swiper.js官网
嵌套两个或多个siwper根据官方文档，我们创建一个swiper是非常简单的，但是如何创建两个swiper，这对于一些新手小白来说可能比较迷茫。这里先给出代码，然后再进行解释。
示例代码下载并引入swiper文件：
HTML代码：
我是父亲swiper的第一个slide我是父亲swiper的第二个slide我是父亲swiper的第三个slide我是儿子swiper的第一个slide我是儿子swiper的第二个slide我是儿子swiper的第三个slide我是儿子swiper的第四个slideCSS代码：*{
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的第一个slide我是儿子swiper的第一个slide我是儿子swiper的第二个slide我是儿子swiper的第三个slide我是儿子swiper的第四个slide我是父亲swiper的第二个slide我是父亲swiper的第三个slide这个时候，我们在滑动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
});
