Material Design风格神框架vuetify 学习笔记(十四) 轮播 蒙版

一. 轮播

1. 最基本的轮播

v-carousel 组件用于在循环计时器上显示大量可视内容。

<v-carousel>
      <v-carousel-item src="~assets/pic1.jpg"> </v-carousel-item>
      <v-carousel-item src="~assets/pic2.jpg"> </v-carousel-item>
      <v-carousel-item src="~assets/pic3.jpg"> </v-carousel-item>
      <v-carousel-item src="~assets/pic4.jpg"> </v-carousel-item>
    </v-carousel>

我们可以看到, 图片不会轮播,需要手动点击

2. 自动轮播 cycle

(1). 自动轮播

我们可以通过cycle属性使其自动轮播

<v-carousel cycle>

(2). 轮播时间间隔 interval

默认轮播间隔6s. 我们可以通过interval设置其轮播间隔

<v-carousel cycle interval='1000'>

(3). 轮播是否连续? continuous

我们可以通过continuous设置其轮播是否是连续执行

默认true(连续执行),
也可以设置为false,这样第一次轮播轮播到最后一张图就会停止

<v-carousel cycle interval='1000' :continuous="false">

(4). 轮播是否连续? continuous

我们可以通过interval设置其轮播间隔

<v-carousel cycle interval='1000'>

我们可以通过interval设置其轮播间隔

<v-carousel cycle interval='1000'>

3. 轮播图反向进入 reverse

正常情况下, 我们的轮播图从右侧划入, 如果设置了 reverse 属性, 轮播图就会从左侧划入

<v-carousel cycle interval='2000' reverse>

4. 显示/隐藏 下一个/前一个 导航的箭头show-arrows

<v-carousel cycle interval='2000' :show-arrows="false">

5. hover才显示 下一个/前一个 导航的箭头show-arrows-on-hover

<v-carousel cycle interval='2000' show-arrows-on-hover>

6. 垂直轮播 vertical

<v-carousel cycle interval='2000' vertical>

诡异的是, 这种状态下, 轮播工具栏还是水平轮播的

7. 垂直工具栏 vertical-delimiters

如果需要垂直工