Swiper Effects(切换特效) - effect

设置Slide的切换效果,默认为"slide"(普通位移切换),还可设置为"fade"(淡入)、"cube"(方块)、"coverflow"(3d流)、"flip"(3d翻转)、"cards"(卡片式)、"creative"(创意性)。

effect信息

类型:
string
默认:
slide
举例:
fade
启用版本:
4.0.0

效果演示

slider1
slider2
slider3
"fade"
slider1
slider2
slider3
"cube"
slider1
slider2
slider3
slider4
slider5
slider6
"coverflow"
slider1
slider2
slider3
slider4
slider5
slider6
"flip"
slider1
slider2
slider3
"cards"
slider1
slider2
slider3
"creative"

使用方法示例

从Swiper7开始,容器默认类名由'.swiper-container'变更为'.swiper'。
<script language="javascript"> 
  var mySwiper = new Swiper('#swiper1', {
    effect: 'fade',
  })
  var mySwiper2 = new Swiper('#swiper2', {
    effect: 'cube',
  })
  var mySwiper3 = new Swiper('#swiper3', {
    effect: 'coverflow',
    slidesPerView: 3,
    centeredSlides: true,
  })
  var mySwiper4 = new Swiper('#swiper4', {
    effect: 'flip',
  })
  var mySwiper5 = new Swiper('#swiper5', {
    effect: 'cards',
  })
  var mySwiper6 = new Swiper('#swiper6', {
    effect: 'creative',
    creativeEffect: {
      prev: {
        ...
      },
      next: {
        ...
      },
    },
  })
</script>