使用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
});
上一篇:模板建站案例-中小企业建站-网页建站-建站案例库 - 阿里云建站


下一篇:maven 安装 on centos7