Swiper Carousel(轮播) - centeredSlides

居中幻灯片。设定为true时,当前的active slide 会居中,而不是默认状态下的居左。

centeredSlides信息

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

效果演示

默认active slide居左,设置为true后居中

slider1
slider2
slider3
slider4
slider5
slider6
slider7
slider8

使用方法示例

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