Tab选项卡下实现Swiper嵌套Swiper

最新推荐文章于 2025-06-24 17:28:47 发布

原创

最新推荐文章于 2025-06-24 17:28:47 发布 · 8.7k 阅读

6 ·

CC 4.0 BY-SA版权

本文介绍如何在移动端项目中使用Swiper插件实现Tab选项卡下嵌套Swiper的效果，通过示例代码详细讲解了Swiper的配置和多Swiper的联动实例，确保在不同Tab间切换时轮播图的同步。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在开发移动端轮播图特效首选的插件就是Swiper。

近期在开发移动端项目中需要实现选项卡嵌套Swiper多tab联动实例这么一个功能，如图所示：

这里写图片描述

首先呢，要在项目的head标签内引入swiper.min.css

<link rel="stylesheet" href="./css/swiper.min.css">

在body内引入swiper.min.js 。（最好是在这个功能模块div结束标签之后引入js文件，由于js文件的加载顺序会直接影响到效果）

<script src="./js/swiper.min.js"></script>

贴代码
html

<div class="prt4_swiper_content nav">
                        <div class="tab">
                            <a href="javascript:;" class="curr">Tab</a>
                            <a href="javascript:;">Tab</a>
                            <a href="javascript:;">Tab</a>
                        </div>
                        <div class="content">
                            <div class="swiper_main" style="display: block;" id="main_one">
                                <div class="swiper-container" id="tabs-container">
                                    <div class="swiper-wrapper">
                                        <div class="swiper-slide">
                                            <img src="./index/images/swiper_img1.jpg" alt="" />
                                        </div>
                                        <div class="swiper-slide">
                                            <img src="./index/images/swiper_img2.jpg" alt="" />
                                        </div>
                                        <div class="swiper-slide">
                                            <img src="./index/images/swiper_img3.jpg" alt="" />
                                        </div>
                                        <div class="swiper-slide">
                                            <img src="./index/images/swiper_img4.jpg" alt="" />
                                        </div>
                                        <div class="swiper-slide">
                                            <img src="./index/images/swiper_img5.jpg" alt="" />
                                        </div>
                                        <div class="swiper-slide">
                                            <img src="./index/images/swiper_img6.jpg" alt="" />
                                        </div>
                                        <div class="swiper-slide">
                                            <img src="./index/images/swiper_img7.jpg" alt="" />
                                        </div>
                                        <div class="swiper-slide">
                                            <img src="./index/images/swiper_img8.jpg" alt="" />
                                        </div>
                                        <div class="swiper-slide">
                                            <img src="./index/images/swiper_img9.jpg" alt="" />
                                        </div>

                                    </div>
                                </div>
                                <div class="swiper-container main_box_tabs">
                                    <div class="swiper_tabs_line"></div>
                                    <div class="swiper-wrapper">
                                        <div class="swiper-slide active">1</div>
                                        <div