首页 前端知识 swiper 一张图在中间,左右各2张显示一半

swiper 一张图在中间,左右各2张显示一半

2024-06-03 12:06:34 前端知识 前端哥 747 300 我要收藏

new Swiper('.store-honor-contianerwaps', {
       autoplay:{
        delay:6000
      },
       speed:600,
      loop: true,
          spaceBetween:20,
      initialSlide: 1,
      centeredSlides : true,
      slidesPerView : 1.2,
      pagination: {
        el: '.swiper-pagination',
        clickable: true,
      },
      // 如果需要分页器
      pagination: {
        el: '.swiper-pagination',
      },
      // 如果需要前进后退按钮
      navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
      },breakpoints:{
        800:{
          spaceBetween:20,
        }
      }
      
    });

   <div class="swiper-container store-honor-contianerwaps">
    <div class="swiper-wrapper">
        {pc:content action="lists" catid="132"}
        <!-- 132 -->
        {loop $data $v}
        <div class="swiper-slide">
            <!-- <img src="statics/static/img/aobuts_03.png" alt=""> -->
            <img src="{$v[thumb]}">
        </div>{/loop}
        {/pc}
       
    </div>
    <div class="swiper-pagination"></div>
</div>

转载请注明出处或者链接地址:https://www.qianduange.cn//article/10644.html
标签
windows
评论
发布的文章

JQuery中的load()、$

2024-05-10 08:05:15

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!