3D流

3D 旋转效果，让幻灯片看起来像一个旋转的卡片堆叠。提供立体的旋转和堆叠效果。

引入

WARNING

v3版本不再默认引入所有modules，这意味着在使用modules中的模块时，都需要手动引入。

同时部分modules的css也需手动引入。需要注意的是，将style设置为scoped会导致样式失效。推荐全局引入所需要的模块样式。参考：引入样式

具体可查看模块化按需引入

npm

<script lang="ts" setup>
import { EffectCoverflow } from '@zebra-ui/swiper/modules'

const modules = ref([EffectCoverflow])
</script>

uni_modules

<script lang="ts" setup>
import { EffectCoverflow } from '@/uni_modules/zebra-swiper/modules'

const modules = ref([EffectCoverflow])
</script>

使用

TIP

该切换效果与轮播块结合使用体验更佳。

<z-swiper
  grabCursor
  effect="coverflow"
  centeredSlides
  :slidesPerView="3"
  :coverflowEffect="{
      rotate: 50,
      stretch: 0,
      depth: 100,
      modifier: 1,
      slideShadows: true,
    }"
  :modules="modules"
>
  <z-swiper-item v-for="item in list" :key="item.id">
    <DemoItem :text="item.text"></DemoItem>
  </z-swiper-item>
</z-swiper>

配置

depth

幻灯片在 Z 轴上的深度偏移，增加立体感。单位(px)

会对幻灯片之间的距离产生影响。

类型

number

默认值

100

<z-swiper
  grabCursor
  effect="coverflow"
  centeredSlides
  :slidesPerView="3"
  :coverflowEffect="{depth: 200}"
  :modules="modules"
>
  <z-swiper-item v-for="item in list" :key="item.id">
    <DemoItem :text="item.text"></DemoItem>
  </z-swiper-item>
</z-swiper>

rotate

幻灯片旋转的角度，以度数为单位。

类型

number

默认值

50

<z-swiper
  grabCursor
  effect="coverflow"
  centeredSlides
  :slidesPerView="3"
  :coverflowEffect="{rotate: 10}"
  :modules="modules"
>
  <z-swiper-item v-for="item in list" :key="item.id">
    <DemoItem :text="item.text"></DemoItem>
  </z-swiper-item>
</z-swiper>

scale

幻灯片的缩放效果。

类型

number

默认值

1

<z-swiper
  grabCursor
  effect="coverflow"
  centeredSlides
  :slidesPerView="3"
  :coverflowEffect="{scale: 0.5}"
  :modules="modules"
>
  <z-swiper-item v-for="item in list" :key="item.id">
    <DemoItem :text="item.text"></DemoItem>
  </z-swiper-item>
</z-swiper>

stretch

幻灯片之间的拉伸距离。单位（px）

类型

number

默认值

0

<z-swiper
  grabCursor
  effect="coverflow"
  centeredSlides
  :slidesPerView="3"
  :coverflowEffect="{stretch: 20}"
  :modules="modules"
>
  <z-swiper-item v-for="item in list" :key="item.id">
    <DemoItem :text="item.text"></DemoItem>
  </z-swiper-item>
</z-swiper>

modifier

效果倍增器。调整效果的强度，数值越大，效果越明显。

类型

number

默认值

1

<z-swiper
  grabCursor
  effect="coverflow"
  centeredSlides
  :slidesPerView="3"
  :coverflowEffect="{modifier: 1.2}"
  :modules="modules"
>
  <z-swiper-item v-for="item in list" :key="item.id">
    <DemoItem :text="item.text"></DemoItem>
  </z-swiper-item>
</z-swiper>

slideShadows

类型

boolean

默认值

true

是否启用幻灯片阴影效果。增加幻灯片的阴影，使其更具立体感。

<z-swiper
  grabCursor
  effect="coverflow"
  centeredSlides
  :slidesPerView="3"
  :coverflowEffect="{slideShadows: false}"
  :modules="modules"
>
  <z-swiper-item v-for="item in list" :key="item.id">
    <DemoItem :text="item.text"></DemoItem>
  </z-swiper-item>
</z-swiper>