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

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

2024-06-03 12:06:34 前端知识 前端哥 729 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
评论
发布的文章

vue学习计划

2024-06-08 18:06:08

fastjson1.2.24-RCE漏洞复现

2024-06-08 09:06:33

JsonPath用法详解

2024-06-08 09:06:55

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