swiper的基础使用（十）

最新推荐文章于 2025-11-12 18:42:55 发布

原创最新推荐文章于 2025-11-12 18:42:55 发布 · 911 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#html5 #swiper #web前端 #框架 #移动

swiper介绍专栏收录该内容

26 篇文章

订阅专栏

本文介绍了如何在HTML5中使用Swiper框架实现页面的多行显示和swiper的嵌套。通过创建一个包含多个垂直slide的水平swiper，再在其中一个水平slide中嵌套一个垂直swiper，展示Swiper的灵活性。初始化时需为每个swiper容器指定不同的类名以避免样式混乱。

本文为 H5EDU 机构官方的 HTML5 培训教程 swiper教程这节课我们介绍swiper页面的多行显示。

这节课我们介绍swiper当中的swiper嵌套。

这次第一步有些不一样，虽然同样是要搭建swiper页面，但是我们在一个swiper页面当中的slide里面嵌套了一个swiper在里面。

<div class="swiper-container swiper-container-h">
        <div class="swiper-wrapper">
            <div class="swiper-slide">Horizontal Slide 1</div>
            <div class="swiper-slide">
                <div class="swiper-container swiper-container-v">
                    <div class="swiper-wrapper">
                        <div class="swiper-slide">Vertical Slide 1</div>
                        <div class="swiper-slide">Vertical Slide 2</div>
                        <div class="swiper-slide">Vertical Slide 3</div>
                        <div class="swiper-slide">Vertical Slide 4</div>
                        <div class="swiper-slide">Vertical Slide 5</div>
                    </div>
                    <div class="swiper-pagination swiper-pagination-v"></div>
                </div>
            </div>
            <div class="swiper-slide">Horizontal Slide 3</div>
            <div class="swiper-slide">Horizontal Slide 4</div>
        </div>
        <!-- Add Pagination -->
        <div class="swiper-pagination swiper-pagination-h"></div>
    </div>

我们可以看到，这次在swiper的外部容器当中添加了一个类名，swiper-container-h，这个类名其实我们可以随便取一个，作为一个标记，记录我们这个外部容器为哪一个swiper页面的外部容器，我们在初始化的时候是要绑定它的，然后有几个swiper的页面我们就要初始化几次，并且每一个初始化都要绑定到不同的swiper页面的外部容器上面，不然的话我们的页面样式就会错乱，下面进行初始化。

 var swiperH = new Swiper('.swiper-container-h', {
        pagination: '.swiper-pagination-h',
        paginationClickable: true,
        spaceBetween: 50
    });
    var swiperV = new Swiper('.swiper-container-v', {
        pagination: '.swiper-pagination-v',
        paginationClickable: true,
        direction: 'vertical',
        spaceBetween: 50
    });

这里因为有俩个swiper页面所以分别初始化了俩次，然后要分别设定每个swiper页面的CSS样式，以及每一个swiper页面当中的属性。注意，绑定的外部容器类名一定部能相同，不然一个页面初始化俩次会造成样式错乱。