swiper tab切换

<ul class="sw-tab-li">
    {% for value in app('category').lists('news') %}
    <li><a href="{{ value.url }}" class="f-16">{{ value.cname }}</a></li>
    {% endfor %}
</ul>

<div class="sw-tab-con">
    {% for value in app('category').lists('news') %}
    <div class="tab-main">
        <div class="home-news-list home-news-list{{loop.index}}">
            <div class="swiper-wrapper">
                {% for val in app('content').lists('news', value.cid, 8) %}
                <div class="swiper-slide">
                    <a href="{{ value.url }}">
                        <div class="com-img"><img src="{{ app('content').thumb(val.uploadfiles,600,600) }}" alt="{{ val.title }}"></div>
                    </a>
                </div>
                {% endfor %}
            </div>
        </div>
    </div>
    {% endfor %}
</div>

/* tab 切换特效 */
$(".tab-li li").eq(0).addClass('on');
$(".tab-con .tab-main").eq(0).addClass('on');
$(".tab-li li").hover(function(){
    var _id = $(this).index();
    $(this).addClass('on').siblings().removeClass('on');
    $(".tab-con .tab-main").eq(_id).addClass('on').siblings().removeClass('on');
});


// 新闻列表
{% for value in app('category').lists('news') %}

    var swiper{{loop.index}} = new Swiper(".home-news-list{{loop.index}}", {
        slidesPerView: 2,
        spaceBetween: 40,
        loop:true,
        autoplay:3000,
        breakpoints: {
        768: {
            slidesPerView: 1,
            spaceBetween: 0,
        },
        1024: {
            slidesPerView: 2,
            spaceBetween: 30,
        },
        },
    });

{% endfor %}