swiper 嵌套切换

<div class="c2_index">
    <div class="c2_con">
        {% for key, value in app('category').lists('product') %}
        <div class="cate-item cate-item{{ key }}">
            
            <div class="cate_middle_wap">
                <div class="pro_swiper pro_swiper{{ loop.index }}">
                    <div class="swiper-wrapper">
                        {% for val in app('content').lists('product', value.cid, 8) %}
                        <div class="swiper-slide">
                            <a href="{{ val.url }}" title="{{ val.title }}">
                                <h3>{{ val.title | truncate(20,'...')}}</h3>
                                <h4>{{ val.extend1 | truncate(20,'...')}}</h4>
                            </a>
                        </div>
                        {% endfor %}
                    </div>
                </div>
                <div class="swiper-button-next swiper-button-next{{ loop.index }}"></div>
                <div class="swiper-button-prev swiper-button-prev{{ loop.index }}"></div>
            </div>
            
        </div>
        {% endfor %}
    </div>
</div>

<script>
    {% for value in app('category').lists('product') %}
        var swiper{{ loop.index }} = new Swiper(".pro_swiper{{ loop.index }}", {
            slidesPerView: 5,
            spaceBetween: 50,
            // centeredSlides: true,
            loop: true,
            speed: 800,
            autoplay: {
                delay: 2500,
                disableOnInteraction: false,
            },
            navigation: {
                nextEl: ".swiper-button-next{{ loop.index }}",
                prevEl: ".swiper-button-prev{{ loop.index }}",
            },
            breakpoints: {
                500: {
                    slidesPerView: 1,
                    spaceBetween: 0,
                },
                640: {
                    slidesPerView: 2,
                    spaceBetween: 20,
                },
                992: {
                    slidesPerView: 3,
                    spaceBetween: 30,
                },
                1366: {
                    slidesPerView: 4,
                    spaceBetween: 40,
                },
            },

        });
    {% endfor %}
</script>


.c2_index{
    position: relative;
}
.c2_con{position: relative;}
.c2_con .cate-item{position: relative;}
.c2_con .cate-item1 .cate_top_title{padding-top: 0px;}

.cate_middle_wap{padding-left: 7.8125vw;padding-right: 7.8125vw;position: relative;margin-bottom: 50px;}
.pro_swiper{overflow: hidden;}
.pro_swiper .swiper-slide{position: relative;text-align: center;}
.pro_swiper .swiper-slide a{display: block;}
.pro_swiper .swiper-slide a img{display: block;width: 100%;}
.pro_swiper .swiper-slide h3{font-size: 18px;font-weight: normal;color: #454545;line-height: 1.7;margin: 10px 0 0;font-family: "Microsoft Yahei";}
.pro_swiper .swiper-slide h4{font-size: 18px;font-weight: normal;color: #454545;line-height: 1.7;margin: 0px 0;font-family: "Microsoft Yahei";opacity: 0;visibility: hidden;}

.cate_middle_wap .swiper-button-next,
.cate_middle_wap .swiper-button-prev {
    position: absolute;
    top: 40%;
    margin-top: -25px;
    width: 24px;
    height: 50px;
    font-size: 0;
    outline: none;
    border: none;
    z-index: 999;
    background: none;
}
.cate_middle_wap .swiper-button-prev{left: 3.90625vw;}
.cate_middle_wap .swiper-button-next{right: 3.90625vw;}

.cate_middle_wap .swiper-button-prev::before{
    content: "";
    position: absolute;
    width: 1px;
    height: 50%;
    background: #f79943;
    transition: transform .2s ease-in;
    left: 0;
    top: 0;
    transform-origin: bottom;
    -webkit-transform: rotate(40deg);
    transform: rotate(40deg);
}
.cate_middle_wap .swiper-button-prev::after{
    content: "";
    position: absolute;
    width: 1px;
    height: 50%;
    background: #f79943;
    transition: transform .2s ease-in;
    left: 0;
    bottom: 0;
    transform-origin: top;
   -webkit-transform: rotate(-40deg);
    transform: rotate(-40deg);
}
.cate_middle_wap .swiper-button-prev:hover::before{
    -webkit-transform: rotate(52deg);
    transform: rotate(52deg);
}
.cate_middle_wap .swiper-button-prev:hover::after{
    -webkit-transform: rotate(-52deg);
    transform: rotate(-52deg);
}
.cate_middle_wap .swiper-button-next::before{
    content: "";
    position: absolute;
    width: 1px;
    height: 50%;
    background: #f79943;
    transition: transform .2s ease-in;
    right: 0;
    top: 0;
    transform-origin: bottom;
    -webkit-transform: rotate(-40deg);
    transform: rotate(-40deg);
}
.cate_middle_wap .swiper-button-next::after{
    content: "";
    position: absolute;
    width: 1px;
    height: 50%;
    background: #f79943;
    transition: transform .2s ease-in;
    right: 0;
    bottom: 0;
    transform-origin: top;
   -webkit-transform: rotate(40deg);
    transform: rotate(40deg);
}
.cate_middle_wap .swiper-button-next:hover::before{
    -webkit-transform: rotate(-52deg);
    transform: rotate(-52deg);
}
.cate_middle_wap .swiper-button-next:hover::after{
    -webkit-transform: rotate(52deg);
    transform: rotate(52deg);
}