swiper基础使用，轮播项居中排列与不居中（偏移）排列，全屏显示与自定义宽度（一）

最新推荐文章于 2025-04-01 09:30:40 发布

易烊千玺的女朋友

最新推荐文章于 2025-04-01 09:30:40 发布

阅读量1.2w

点赞数 5

分类专栏： swiper 文章标签： JavaScript swiper HTML

本文链接：https://blog.youkuaiyun.com/qq_41046662/article/details/88035800

版权

swiper 专栏收录该内容

2 篇文章

订阅专栏

本文介绍了如何使用Swiper实现轮播项的居中和不居中（偏移）排列，以及如何设置全屏显示和自定义宽度。通过调整slidesOffsetBefore属性，可以改变左右偏移量，同时可通过样式设置改变slider的宽度，如设置为8vw。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

如图左右偏移量不一样，设置slidesOffsetBefore：number即可。

默认一个如果没有设置slidesPerView 一个slider的宽度为100%，可以自定义宽度在style设置，我自己设置8vw；

<script src="/dist/js/swiper.min.js"></script>

<div class="swiper-container-new">

        <div class="swiper-wrapper">

        <!-- 1 -->

        <div class="swiper-slide">内容1</div>

        <!-- 2 -->

        <div class="swiper-slide">内容2</div>

        <!-- 3 -->

        <div class="swiper-slide">内容3</div>

        <!-- 如果需要分页器 -->

       <div class="swiper-pagination2"></div> 

</div>

<script>

          //.swiper-container-new  我们轮播大容器的选择器

          var mySwiper2 = new Swiper('.swiper-container-new', {

          direction: 'horizontal',      // 水平切换选项    垂直vertical  默认是水平切换模式

          loop: true,                   // 循环模式选项

          autoplay: true,               //会在原本slide前后复制若干个slide(默认一个)并在合适的时候切换，让Swiper看起来是循环的。 
          //loop模式在与free模式同用时会产生抖动，因为free模式下没有复制slide的时间点

            speed:500,                  //速度，根据个人喜好

            pagination: {

               el: '.swiper-pagination2',  //分页器 -

             },

            slidesPerView: 'auto',      //设置slider容器能够同时显示的slides数量

            noSwiping: false,           //设为true时，可以在slide上（或其他元素）增加类名'swiper-no-swiping'，使该slide无法拖动，希望文字被选中时可以考虑使用。该类名可通过noSwipingClass修改

            watchSlidesProgress: true,  //开启这个参数来计算每个slide的progress(进度、进程)

            paginationClickable: false,

            slidesPerView: 'auto',      //设置slider容器能够同时显示的slides数量

            spaceBetween: 15,           //在slide之间设置距离 默认单位px 也可以设置% vw vh ....

            centeredSlides:false,       //设定为true时，active slide会居中，而不是默认状态下的居左

            slidesOffsetBefore:30,      //设定slide与左边框的预设偏移量 还有slidesOffsetAfter 反之

            })

</script>