swiper联动侧边栏(带图片)

最新推荐文章于 2023-04-24 22:03:32 发布

挣扎的工程师

最新推荐文章于 2023-04-24 22:03:32 发布

阅读量1k

点赞数 1

文章标签： css3 css 前端

本文链接：https://blog.csdn.net/qq_43715354/article/details/122035308

版权

swiper联动侧边栏

大家好，今天我们来学习一下swiper联动侧边栏，好好看，好好学，超详细的。

第一步

首先，我们来了解一下swiper组件，进入swiper官网

第二步

直接上代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>swiper</title>
    <link rel="stylesheet" href="/guanglianstatic/swiper/swiper-bundle.min.css"/>
    <style>
        .tab-wrap {
            border-left: 1px solid #898989;
        }

        .tab-wrap ul > li.tab-item {
            width: 240px;
            height: 125px;
            font-size: 14px;
            border-bottom: 1px solid #d7d7d7;
        }


        .tab-wrap ul > li.tab-item > a {
            width: 100%;
            height: 100%;
            padding: 0 40px;
            display: inline-block;
            vertical-align: middle;
            cursor: pointer;
            position: relative;
        }

        .tab-wrap ul > li.tab-item > a h3 {
            font-size: 20px;
        }

        .tab-tag {
            font-size: 12px;
            color: #b5b5b5;
        }

        .active-tab {
            background-color: #eaeaea;
            transition: 0.5s;
        }

        .active-tab:before {
            content: '';
            display: block;
            position: absolute;
            top: -1px;
            left: -2px;
            height: 126px;
            width: 4px;
            background-color: #003594;
            transition: 0.5s;
        }


        .swiper-tab {
            width: 700px;
            height: 100%;
        }

        .swiper-left-item {
            background-color: #003594;
            width: 200px;
        }

        .swiper-slide a {
            height: 100%;
        }
    </style>
</head>
<body>
<div class="content" style="margin: 0;">
    <div class="child-module-list" style="padding: 80px 0;margin: 0;">
        <div style="padding-left: 150px;background-color: #003594;">
            <div class="swiper-tab">
                <div class="swiper" id="swiperTab">
                    <div class="swiper-wrapper">
                        <div class="swiper-slide">
                            <a href="/product?title=LED大灯" target="_self">
                                <img src="http://localhost:8080/upload/img-ctz6ic-641796.jpg">
                            </a>
                        </div>
                        <div class="swiper-slide">
                            <a href="/product?title=应急启动电源" target="_self">
                                <img src="http://localhost:8080/upload/img-cmQN4x-223776.jpg">
                            </a>
                        </div>
                        <div class="swiper-slide">
                            <a href="/product?title=储能电源" target="_self">
                                <img src="http://localhost:8080/upload/img-tLdtbp-837812.jpg">
                            </a>
                        </div>
                        <div class="swiper-slide">
                            <a href="/product?title=气泵与应急电源一体机" target="_self">
                                <img src="http://localhost:8080/upload/img-BMCjX4-478803.jpg">
                            </a>
                        </div>
                    </div>
                    <div class="swiper-button-next swiper-button-rigth"></div>
                    <div class="swiper-button-prev swiper-button-left"></div>
                </div>
            </div>

        </div>

        <div class="tab-wrap">
            <ul style="margin: 0;">
                <li class="tab-item" style="border-top: 1px solid #d7d7d7;">
                    <a data-index="0">
                        <h3>汽车LED车灯</h3>
                        <div class="tab-tag">Auto Led</div>
                        <div class="tab-tag">headlight section</div>
                    </a>
                </li>
                <li class="tab-item">
                    <a data-index="1">
                        <h3>应急启动电源</h3>
                        <div class="tab-tag">Emergency</div>
                        <div class="tab-tag">starting power</div>
                    </a>
                </li>
                <li class="tab-item">
                    <a data-index="2">
                        <h3>储能电源</h3>
                        <div class="tab-tag">Auto Led</div>
                        <div class="tab-tag">headlight section</div>
                    </a>
                </li>
                <li class="tab-item">
                    <a data-index="3">
                        <h3>气泵与应急电源一体机</h3>
                        <div class="tab-tag">Air pump and power</div>
                        <div class="tab-tag">supply integrated machine</div>
                    </a>
                </li>
            </ul>
        </div>
    </div>
</div>

<script type="text/javascript" src="/guanglianstatic/swiper/swiper-bundle.min.js"></script>
<script type="application/javascript">
    var swiperTab;
    $(function () {
        swiperTab = new Swiper("#swiperTab", {
            autoplay: true,
            allowTouchMove: false,
            preventClicksPropagation: false,
            navigation: {
                nextEl: ".swiper-button-next",
                prevEl: ".swiper-button-prev",
            },
            on: {
                slideChange: function () {
                    var index = this.activeIndex;
                    console.log(index);
                    $(".tab-wrap ul > li.tab-item a").eq(index).addClass("active-tab").parent().siblings().children().removeClass("active-tab");
                },
            },
        });

        $(".tab-wrap ul > li.tab-item a").eq(0).addClass('active-tab');
    })

    $(".tab-wrap ul > li.tab-item a").click(function () {
        $(this).addClass("active-tab").parent().siblings().children().removeClass("active-tab");
        console.log($(this).data("index"))
        swiperTab.slideTo($(this).data("index"));
    })

</script>
</body>
</html>