Swiper 常用代码片段

这里是 JavaScript 的文档内容。

swiper 自动切换

<div class="swiper1-swiper">
    <div class="swiper-wrapper">
        {% for value in app('section').id('67303') %}
        <div class="swiper-slide">
           <img src="{{ value.img[0] }}" alt="{{ value.name }}">
        </div>
        {% endfor %}
    </div>
    <div class="swiper-button-next"></div>
    <div class="swiper-button-prev"></div>
    <div class="swiper-pagination"></div>
</div>

<script>
    var swiper = new Swiper(".swiper1-swiper", {
        slidesPerView: 1,
        spaceBetween: 30,
        autoplay: {
          delay: 2500,
          disableOnInteraction: false,
        },
        pagination: {
          el: ".swiper-pagination",
          clickable: true,
        },
        navigation: {
          nextEl: ".swiper-button-next",
          prevEl: ".swiper-button-prev",
        },
        breakpoints: {
            640: {
                slidesPerView: 2,
                spaceBetween: 20,
            },
            768: {
                slidesPerView: 4,
                spaceBetween: 40,
            },
            1024: {
                slidesPerView: 5,
                spaceBetween: 50,
            },
        },
    });
</script>

swiper 双排切换分组

<div class="proSwiper swiper-cp1">
    <div class="swiper-wrapper">
        {% for value in products.show(0,6,0,1) %}
        <div class="slicon">
            <a href="{{ value.url }}" title="{{ value.title }}">
              <div class="img com-img">
                 <img src="{{ app('content').thumb(value.uploadfiles[0],600,600) }}" alt="">
              </div>
            </a>
        </div>
        {% endfor %}
    </div>
</div>

<script>
    /* 使用js分组，每4个.slick-con放到一个div里面 */
    jQuery(".swiper-cp1 .slicon").each(function(i){ jQuery(".swiper-cp1 .slicon").slice(i*2,i*2+2).wrapAll("<div class='swiper-slide'></div>");});

    var swiper = new Swiper(".swiper-cp1", {
        slidesPerView: 3,
        spaceBetween: 30,
        autoplay:true,
        loop: true,
    });
</script>