知识专栏
多方位、多角度、深度解读您所关心的问题

cover flow是类似于苹果将多首歌曲的封面以3D界面的形式显示出来的方式。

使用示例:

<script language="javascript">
    var swiper = new Swiper(".mySwiper", {
        effect: "coverflow",
  slidesPerView: 3,
        grabCursor: true,
        centeredSlides: false,
        coverflowEffect: {
          rotate: 50,
          stretch: 0,
          depth: 100,
          modifier: 1,
          slideShadows: false,
        },
     autoplay: {
    disableOnInteraction: false,
    delay:4000,
     },
        pagination: {
          el: ".swiper-pagination",
        },
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  },
    });
</script>

上述coverflowEffect参数的说明:

(1)rotate:默认值50。slide做3d旋转时Y轴的旋转角度。

(2)stretch:默认值0。每个slide之间的拉伸值,越大slide靠得越紧。5.3.6 后可使用%百分比。

(3)depth:默认值100。slide的位置深度。值越大z轴距离越远,看起来越小。

(4)modifier:默认值1。depth和rotate和stretch的倍率,相当于depth*modifier、rotate*modifier、stretch*modifier,值越大这三个参数的效果越明显。

(5)slideShadows:默认值true。是否开启slide阴影。


猜您还想看: swiper coverflow coverflowEffect
赞一下
--
踩一脚
--

您已成功复制微信号

leishi010

打开微信添加好友?

确定