Quasar组件 Carousel走马灯

通过对比两个q-carousel组件来，了解该组件的属性

官方文档请参阅：Carousel

预览

源代码

<template><div class="q-pa-md"><div class="q-gutter-md"><q-carouselv-model="slide"transition-prev="scale"transition-next="scale"swipeableanimatedcontrol-color="white"navigationpaddingarrowsheight="300px"class="bg-primary text-white shadow-1 rounded-borders"><q-carousel-slide name="style" class="column no-wrap flex-center"><q-icon name="style" size="56px" /><div class="q-mt-md text-center">{{ lorem }}</div></q-carousel-slide><q-carousel-slide name="tv" class="column no-wrap flex-center"><q-icon name="live_tv" size="56px" /><div class="q-mt-md text-center">{{ lorem }}</div></q-carousel-slide><q-carousel-slide name="layers" class="column no-wrap flex-center"><q-icon name="layers" size="56px" /><div class="q-mt-md text-center">{{ lorem }}</div></q-carousel-slide><q-carousel-slide name="map" class="column no-wrap flex-center"><q-icon name="terrain" size="56px" /><div class="q-mt-md text-center">{{ lorem }}</div></q-carousel-slide></q-carousel><q-carouselv-model="slide"transition-prev="jump-right"transition-next="jump-left"swipeableanimatedcontrol-color="white"prev-icon="arrow_left"next-icon="arrow_right"navigation-icon="radio_button_unchecked"navigationpaddingarrowsheight="300px"class="bg-purple text-white shadow-1 rounded-borders"><q-carousel-slide name="style" class="column no-wrap flex-center"><q-icon name="style" size="56px" /><div class="q-mt-md text-center">{{ lorem }}</div></q-carousel-slide><q-carousel-slide name="tv" class="column no-wrap flex-center"><q-icon name="live_tv" size="56px" /><div class="q-mt-md text-center">{{ lorem }}</div></q-carousel-slide><q-carousel-slide name="layers" class="column no-wrap flex-center"><q-icon name="layers" size="56px" /><div class="q-mt-md text-center">{{ lorem }}</div></q-carousel-slide><q-carousel-slide name="map" class="column no-wrap flex-center"><q-icon name="terrain" size="56px" /><div class="q-mt-md text-center">{{ lorem }}</div></q-carousel-slide></q-carousel></div></div>
</template>
这两个q-carousel有什么区别

比对

这两个 q-carousel 组件的主要区别在于它们的过渡效果（transition）和导航控制图标：

1. 第一个 q-carousel：

   • 使用 transition-prev="scale" 和 transition-next="scale"，这意味着幻灯片切换时有缩放效果
   • 使用默认的导航箭头图标
   • 背景颜色为 bg-primary（默认是蓝色系）
   • 控制颜色设置为白色 (control-color="white")

2. 第二个 q-carousel：

   • 使用 transition-prev="jump-right" 和 transition-next="jump-left"，这会产生一种跳跃式的幻灯片切换效果
   • 自定义了导航图标：
     • prev-icon="arrow_left" - 上一张按钮使用左箭头图标
     • next-icon="arrow_right" - 下一张按钮使用右箭头图标
     • navigation-icon="radio_button_unchecked" - 导航指示器使用未选中的单选按钮图标
   • 背景颜色为 bg-purple（紫色）
   • 控制颜色同样设置为白色

其他方面两者是相同的：

• 都支持滑动手势 (swipeable)
• 都有动画效果 (animated)
• 都显示导航指示器 (navigation)
• 都有内边距 (padding)
• 都显示箭头控制 (arrows)
• 高度都设置为 300px
• 都有相同的四个幻灯片内容（style, tv, layers, map）
• 都使用了相同的文本内容 ({{ lorem }})