两个swiper上面可以点击下面可以用箭头滑动

效果

 

html

<div class="system">

            <div class="swiper system_tit">

                <div class="swiper-wrapper system_list">

                    <div class="swiper-slide system_item">

                        质量

                    </div>

                    <span>/</span>

                    <div class="swiper-slide system_item">

                        职业健康

                    </div>

                    <span>/</span>

                    <div class="swiper-slide system_item">

                        环境

                    </div>

                    <span>/</span>

                </div>

            </div>

            <div class="swiper system_con">

                <div class="swiper-wrapper">

                    <div class="swiper-slide system_item2">

                        <ul class="system_ul1">

                            <li class="system_li">

                                <img src="img/product/prtion4.jpg" alt="">

                            </li>

                        </ul>

                        <ul class="system_ul2">

                            <p class="system_p2">建立质量检验中心</p>

                            <p class="system_p3">

                                公司建立了质量检验中心，配置了对生产过程进行中控以及最终产品进行质量检验的设备和人员。以安全标准化与双重预防机制、职业健康与环保管档案管理为基础，保障公司EHS管理体系的有效运行

                            </p>

                        </ul>

                    </div>

                    <div class="swiper-slide system_item2">

                        <ul class="system_ul1">

                            <li class="system_li">

                                <img src="img/product/prtion5.jpg" alt="">

                            </li>

                        </ul>

                        <ul class="system_ul2">

                            <p class="system_p2">完善职业健康体系</p>

                            <p class="system_p3">

                                EHS部组织按照相关法律、法规要求，对主要负责人、生产人员、安全及职业健康管理人员进行外委培训，并取得了相应的管理资格证；对新进员工实行三级（公司级、部门级、班组级）安全培训；同时组织日常的法律、法规，物料安全等方面的专项培训

                            </p>

                        </ul>

                    </div>

                    <div class="swiper-slide system_item2">

                        <ul class="system_ul1">

                            <li class="system_li">

                                <img src="img/product/prtion6.jpg" alt="">

                            </li>

                        </ul>

                        <ul class="system_ul2">

                            <p class="system_p2">完成环境评价</p>

                            <p class="system_p3">

                                完成规范的环保治理设施建设，包括工艺废气处理装置、污水处理站、MVR除盐装置等，高效治污。公司建立中控室，包含消防控制室与DCS控制室，公司每年投入大量的经费用于应急设备的维护保养与应急队伍的演练。并对安全、环境应急预案进行备案与定期演练

                            </p>

                        </ul>

                    </div>

                </div>

            </div>

            <div class="pc">

                <div class="pr_main">

                    <div class="btn pr_prev">

                        <i class="iconfont icon-jiantou_xiangzuo"></i>

                    </div>

                    <div class="btn pr_next">

                        <i class="iconfont icon-jiantou_xiangyou"></i>

                    </div>

                </div>

            </div>

        </div>

 

css

/**/

.system_p1 {

    text-align: center;

    font-size: 40px;

    font-weight: bold;

}

.system {

    margin-top: 40px;

    position: relative;

}

.system_con {

    overflow: hidden;

    margin-top: 30px;

}

.system_list {

    display: flex;

    justify-content: center;

}

.system_item {

    width: 10% !important;

    text-align: center;

}

.system_item:hover {

    cursor: pointer;

}

.system_list .swiper-slide-thumb-active {

    color: #1f528e;

}

.system_list span:last-child {

    display: none;

}

.system_item2 {

    display: flex;

    justify-content: space-between;

    flex-wrap: wrap;

}

.system_ul1 {

    width: 60%;

}

.system_ul1:hover .system_li img {

    transform: scale(1.05);

}

.system_ul2 {

    width: 40%;

    background: #f2f2f3;

    padding: 70px 50px;

}

.system_li {

    overflow: hidden;

}

.system_li img {

    transition: all 0.3s ease;

}

.system_p2 {

    font-size: 24px;

    font-weight: bold;

}

.system_p3 {

    margin-top: 50px;

}

.system_p4 {

    margin-top: 20px;

    text-align: center;

}

/* .system_p4 img {

    width: 400px;

} */

.system_p5 {

    text-align: right;

    margin-right: 20px;

    margin-top: 10px;

}

.pr_main {

    display: flex;

    position: absolute;

    right: 26%;

    bottom: 100px;

    z-index: 1;

}

.pr_main:hover i {

    cursor: pointer;

}

.pr_main i {

    font-size: 30px;

    color: #1f528e;

    margin-right: 30px;

}

/**/

 

js

var swiper = new Swiper(".system_tit", {

            spaceBetween: 0,

            slidesPerView: 3,

            freeMode: true,

            watchSlidesProgress: true,

        });

        var system_con = new Swiper(".system_con", {

            spaceBetween: 0,

            effect: 'fade',

            navigation: {

                nextEl: ".pr_next",

                prevEl: ".pr_prev",

            },

            thumbs: {

                swiper: swiper,

            },

            autoplay: {

                delay: 4000,

                stopOnLastSlide: false,

                disableOnInteraction: false,

            },

        });