swipe轮播图centeredSlides 参数选项配置（true居中或者false居左）

soberbloke

于 2019-11-15 15:35:06 发布

阅读量8.2k

点赞数 1

文章标签： swiper 轮播图 js jquery centeredSlides

本文链接：https://blog.csdn.net/soberbloke/article/details/103086328

版权

本文介绍在项目中使用轮播图组件遇到的问题及解决方法，通过调整centeredSlides参数，使轮播图在页面上显示更加美观，同时分享了具体的Swiper配置代码。

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

最近做一个项目需要用到轮播图，但在使用过程中发现一些问题，在使用引入到页面时，会发现和我想要的效果有些不一样；比如：
在这里插入图片描述

这种情况就是左右两侧都有空白，这个时候需要把两侧空白去掉，我们只需要改一下centeredSlides这个参数选项配置，设定为true时，active slide会居中，而不是默认状态下的居左。设定为false时，active slide会居左显示。

var prependNumber = 1;
        var swiper = new Swiper('.swiper-container', {
            slidesPerView: 5,
            centeredSlides: false,
            spaceBetween: 30,
            pagination: {
                el: '.swiper-pagination',
                clickable: true,
            },
            navigation: {
                // nextEl: '.swiper-button-next',
                // prevEl: '.swiper-button-prev',
                nextEl: '.swiper-button-prev',
                prevEl: '.swiper-button-next',
            },
        });