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

最新推荐文章于 2023-08-17 16:19:58 发布

qq_39161501

最新推荐文章于 2023-08-17 16:19:58 发布

阅读量1.2k

点赞数

文章标签：前端 windows html jquery

本文链接：https://blog.csdn.net/qq_39161501/article/details/130615646

版权

这段代码展示了如何使用Swiper库创建一个自动播放、循环且具有分页器和前进后退按钮的滑动展示，适用于web页面中的荣誉证书或图片轮播。每个滑块包含从后台获取的数据，显示自定义图片。

摘要由CSDN通过智能技术生成

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>