swiper 自动切换_编程笔记

swiper 自动切换

2023-09-22 11:14:29  浏览:1714  作者:保利尼奥
<div class="pin_swiper"> <div class="swiper-wrapper"> {% for value in app(&#39;section&#39;).id(&#39;67303&#39;) %} ...
<div class="pin_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(".pin_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 3D切换

下一篇:swiper 嵌套切换

评论区

共 0 条评论
  • 这篇文章还没有收到评论,赶紧来抢沙发吧~

【随机内容】

返回顶部