Swiper Carousel(轮播) - centeredSlidesBounds

居中幻灯片无缺口。当你通过设置 centeredSlides: true 使得幻灯片居中后,还可以配合设置此参数,使得第一个和最后一个slide 始终贴合边缘而不会出现缺口。
此选项不适用于 loop 模式并会使 pagination 出现异常。

centeredSlidesBounds信息

类型:
boolean
默认:
false
举例:
true
启用版本:
5.2.0

效果演示

slider1
slider2
slider3
slider4
slider5
slider6
slider7
slider8
 

使用方法示例

从Swiper7开始,容器默认类名由'.swiper-container'变更为'.swiper'。
<script language="javascript"> 
  var mySwiper = new Swiper('.swiper', {
    slidesPerView: 3,
    centeredSlides: true,
    centeredSlidesBounds: true,
  })
</script>
<style type="text/css">
  .swiper-slide-active{
    background:#ff6600;
    color:#fff;
  }
</style>