轮播

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

用例

v-carousel 组件在 v-window 的基础上进行了扩展，提供了更多针对图像显示的功能。

Carousels（轮播） - 图1

次要组件

  • v-carousel-item：v-carousel 使用的图像容器。继承 v-window-item，且是可通过路由导航的，并使用 v-img 安装在其默认插槽。

API

从下面选择您想要的组件，并查看可用的属性、插槽、事件和函数。

Carousels（轮播） - 图2

示例

下面是一些简单到复杂的例子。

循环

有了 cycle 属性，你可以让你的轮播每 6s（默认）自动转换到下一个。

template script

  1. <template>
  2.   <v-carousel
  3.     cycle
  4.     height="400"
  5.     hide-delimiter-background
  6.     show-arrows-on-hover
  7.   >
  8.     <v-carousel-item
  9.       v-for="(slide, i) in slides"
  10.       :key="i"
  11.     >
  12.       <v-sheet
  13.         :color="colors[i]"
  14.         height="100%"
  15.       >
  16.         <v-row
  17.           class="fill-height"
  18.           align="center"
  19.           justify="center"
  20.         >
  21.           <div class="display-3">{{ slide }} Slide</div>
  22.         </v-row>
  23.       </v-sheet>
  24.     </v-carousel-item>
  25.   </v-carousel>
  26. </template>
  1. <script>
  2.   export default {
  3.     data () {
  4.       return {
  5.         colors: [
  6.           'indigo',
  7.           'warning',
  8.           'pink darken-2',
  9.           'red lighten-1',
  10.           'deep-purple accent-4',
  11.         ],
  12.         slides: [
  13.           'First',
  14.           'Second',
  15.           'Third',
  16.           'Fourth',
  17.           'Fifth',
  18.         ],
  19.       }
  20.     },
  21.   }
  22. </script>

Carousels（轮播） - 图3

自定义过渡

v-carousel-item 组件可以使用 transition/reverse-transition 来改变过渡动画。

template script

  1. <template>
  2.   <v-carousel>
  3.     <v-carousel-item
  4.       v-for="(item,i) in items"
  5.       :key="i"
  6.       :src="item.src"
  7.       reverse-transition="fade-transition"
  8.       transition="fade-transition"
  9.     ></v-carousel-item>
  10.   </v-carousel>
  11. </template>
  1. <script>
  2.   export default {
  3.     data () {
  4.       return {
  5.         items: [
  6.           {
  7.             src: 'https://cdn.vuetifyjs.com/images/carousel/squirrel.jpg',
  8.           },
  9.           {
  10.             src: 'https://cdn.vuetifyjs.com/images/carousel/sky.jpg',
  11.           },
  12.           {
  13.             src: 'https://cdn.vuetifyjs.com/images/carousel/bird.jpg',
  14.           },
  15.           {
  16.             src: 'https://cdn.vuetifyjs.com/images/carousel/planet.jpg',
  17.           },
  18.         ],
  19.       }
  20.     },
  21.   }
  22. </script>

Carousels（轮播） - 图4

自定义分隔符

使用任何可用的图标来改变轮播的滑动分隔符。

template script

  1. <template>
  2.   <v-card
  3.     elevation="24"
  4.     max-width="444"
  5.     class="mx-auto"
  6.   >
  7.     <v-system-bar lights-out></v-system-bar>
  8.     <v-carousel
  9.       :continuous="false"
  10.       :cycle="cycle"
  11.       :show-arrows="false"
  12.       hide-delimiter-background
  13.       delimiter-icon="mdi-minus"
  14.       height="300"
  15.     >
  16.       <v-carousel-item
  17.         v-for="(slide, i) in slides"
  18.         :key="i"
  19.       >
  20.         <v-sheet
  21.           :color="colors[i]"
  22.           height="100%"
  23.           tile
  24.         >
  25.           <v-row
  26.             class="fill-height"
  27.             align="center"
  28.             justify="center"
  29.           >
  30.             <div class="display-3">{{ slide }} Slide</div>
  31.           </v-row>
  32.         </v-sheet>
  33.       </v-carousel-item>
  34.     </v-carousel>
  35.     <v-list two-line>
  36.       <v-list-item>
  37.         <v-list-item-avatar>
  38.           <v-img src="https://cdn.vuetifyjs.com/images/john.png"></v-img>
  39.         </v-list-item-avatar>
  40.         <v-list-item-content>
  41.           <v-list-item-title>John Leider</v-list-item-title>
  42.           <v-list-item-subtitle>Author</v-list-item-subtitle>
  43.         </v-list-item-content>
  44.         <v-list-item-action>
  45.           <v-switch
  46.             v-model="cycle"
  47.             label="Cycle Slides"
  48.             inset
  49.           ></v-switch>
  50.         </v-list-item-action>
  51.       </v-list-item>
  52.     </v-list>
  53.   </v-card>
  54. </template>
  1. <script>
  2.   export default {
  3.     data () {
  4.       return {
  5.         colors: [
  6.           'green',
  7.           'secondary',
  8.           'yellow darken-4',
  9.           'red lighten-2',
  10.           'orange darken-1',
  11.         ],
  12.         cycle: false,
  13.         slides: [
  14.           'First',
  15.           'Second',
  16.           'Third',
  17.           'Fourth',
  18.           'Fifth',
  19.         ],
  20.       }
  21.     },
  22.   }
  23. </script>

Carousels（轮播） - 图5

Enterprise support through Tidelift

The Tidelift Subscription is a managed open source subscription for application dependencies.

ads by Vuetify

]($a0bade116661502f.md)

隐藏控件

可以使用 :show-arrows="false" 隐藏轮播的导航控件。

template script

  1. <template>
  2.   <v-carousel :show-arrows="false">
  3.     <v-carousel-item
  4.       v-for="(item,i) in items"
  5.       :key="i"
  6.       :src="item.src"
  7.     ></v-carousel-item>
  8.   </v-carousel>
  9. </template>
  1. <script>
  2.   export default {
  3.     data () {
  4.       return {
  5.         items: [
  6.           {
  7.             src: 'https://cdn.vuetifyjs.com/images/carousel/squirrel.jpg',
  8.           },
  9.           {
  10.             src: 'https://cdn.vuetifyjs.com/images/carousel/sky.jpg',
  11.           },
  12.           {
  13.             src: 'https://cdn.vuetifyjs.com/images/carousel/bird.jpg',
  14.           },
  15.           {
  16.             src: 'https://cdn.vuetifyjs.com/images/carousel/planet.jpg',
  17.           },
  18.         ],
  19.       }
  20.     },
  21.   }
  22. </script>

Carousels（轮播） - 图6

隐藏分隔符

你可以使用 hide-delimiters 属性隐藏底部控件。

template script

  1. <template>
  2.   <v-carousel hide-delimiters>
  3.     <v-carousel-item
  4.       v-for="(item,i) in items"
  5.       :key="i"
  6.       :src="item.src"
  7.     ></v-carousel-item>
  8.   </v-carousel>
  9. </template>
  1. <script>
  2.   export default {
  3.     data () {
  4.       return {
  5.         items: [
  6.           {
  7.             src: 'https://cdn.vuetifyjs.com/images/carousel/squirrel.jpg',
  8.           },
  9.           {
  10.             src: 'https://cdn.vuetifyjs.com/images/carousel/sky.jpg',
  11.           },
  12.           {
  13.             src: 'https://cdn.vuetifyjs.com/images/carousel/bird.jpg',
  14.           },
  15.           {
  16.             src: 'https://cdn.vuetifyjs.com/images/carousel/planet.jpg',
  17.           },
  18.         ],
  19.       }
  20.     },
  21.   }
  22. </script>

Carousels（轮播） - 图7

v-model 控制

你可以用 model 控制轮播。

template script

  1. <template>
  2.   <div>
  3.     <v-row justify="space-around">
  4.       <v-icon @click="model--">mdi-minus</v-icon>
  5.       {{ model }}
  6.       <v-icon @click="model++">mdi-plus</v-icon>
  7.     </v-row>
  8.     <v-carousel v-model="model">
  9.       <v-carousel-item
  10.         v-for="(color, i) in colors"
  11.         :key="color"
  12.       >
  13.         <v-sheet
  14.           :color="color"
  15.           height="100%"
  16.           tile
  17.         >
  18.           <v-row
  19.             class="fill-height"
  20.             align="center"
  21.             justify="center"
  22.           >
  23.             <div class="display-3">Slide {{ i + 1 }}</div>
  24.           </v-row>
  25.         </v-sheet>
  26.       </v-carousel-item>
  27.     </v-carousel>
  28.   </div>
  29. </template>
  1. <script>
  2.   export default {
  3.     data () {
  4.       return {
  5.         colors: [
  6.           'primary',
  7.           'secondary',
  8.           'yellow darken-2',
  9.           'red',
  10.           'orange',
  11.         ],
  12.         model: 0,
  13.       }
  14.     },
  15.   }
  16. </script>

Carousels（轮播） - 图8