swiper 分组切换

<div class="pro_right_con tab-con">
    {% for value in app('category').lists('product') %}
    <div class="pro_main tab-main">
        <div class="proSwiper swiper-cp{{loop.index}}">
            <div class="swiper-wrapper">
                {% for val in app('content').lists('product', value.cid, 10) %}
                <div class="slicon">
                    <a href="{{ val.url }}" title="{{ val.title }}">
                        <div class="slex"><h3>111111</h3></div>
                    </a>
                </div>
                {% endfor %}
            </div>
        </div>
        <script>
            /* 使用js分组，每2个.slick-con放到一个div里面 */
            jQuery(".swiper-cp{{loop.index}} .slicon").each(function(i){ jQuery(".swiper-cp{{loop.index}} .slicon").slice(i*2,i*2+2).wrapAll("<div class='swiper-slide'></div>");});

            var swiper = new Swiper(".swiper-cp{{loop.index}}", {
                slidesPerView: 3,
                spaceBetween: 60,
                autoplay:true,
                loop: false,
                breakpoints: {
                768: { //当屏幕宽度大于等于320
                    slidesPerView: 1,
                    spaceBetween: 10
                },
                992: { //当屏幕宽度大于等于768
                    slidesPerView: 2,
                    spaceBetween: 20
                },
                1366: { //当屏幕宽度大于等于1280
                    slidesPerView: 2,
                    spaceBetween: 30,
                    },
                },
            });
        </script>
       
    </div>
    {% endfor %}
</div>