轮播

轮播是一个内容滑动器，具有各种自定义选项。

导入 # 


import Carousel from 'primevue/carousel';

基本 #

轮播需要一个项目集合作为其值，以及一个用于渲染每个项目的模板。

无可用选项

<Carousel :value="products" :numVisible="3" :numScroll="3" :responsiveOptions="responsiveOptions">
    <template #item="slotProps">
        <div class="border border-surface-200 dark:border-surface-700 rounded m-2  p-4">
            <div class="mb-4">
                <div class="relative mx-auto">
                    <img :src="'https://primefaces.org/cdn/primevue/images/product/' + slotProps.data.image" :alt="slotProps.data.name" class="w-full rounded" />
                    <Tag :value="slotProps.data.inventoryStatus" :severity="getSeverity(slotProps.data.inventoryStatus)" class="absolute" style="left:5px; top: 5px"/>
                </div>
            </div>
            <div class="mb-4 font-medium">{{ slotProps.data.name }}</div>
            <div class="flex justify-between items-center">
                <div class="mt-0 font-semibold text-xl">${{ slotProps.data.price }}</div>
                <span>
                    <Button icon="pi pi-heart" severity="secondary" outlined />
                    <Button icon="pi pi-shopping-cart" class="ml-2"/>
                </span>
            </div>
        </div>
    </template>
</Carousel>

循环 #

当以毫秒为单位定义autoplayInterval时，项目会自动滚动。此外，对于无限滚动，需要添加circular属性，该属性在自动播放模式下自动启用。

无可用选项

<Carousel :value="products" :numVisible="3" :numScroll="1" :responsiveOptions="responsiveOptions" circular :autoplayInterval="3000">
    <template #item="slotProps">
        <div class="border border-surface-200 dark:border-surface-700 rounded m-2  p-4">
            <div class="mb-4">
                <div class="relative mx-auto">
                    <img :src="'https://primefaces.org/cdn/primevue/images/product/' + slotProps.data.image" :alt="slotProps.data.name" class="w-full rounded" />
                    <Tag :value="slotProps.data.inventoryStatus" :severity="getSeverity(slotProps.data.inventoryStatus)" class="absolute" style="left:5px; top: 5px"/>
                </div>
            </div>
            <div class="mb-4 font-medium">{{ slotProps.data.name }}</div>
            <div class="flex justify-between items-center">
                <div class="mt-0 font-semibold text-xl">${{ slotProps.data.price }}</div>
                <span>
                    <Button icon="pi pi-heart" severity="secondary" outlined />
                    <Button icon="pi pi-shopping-cart" class="ml-2"/>
                </span>
            </div>
        </div>
    </template>
</Carousel>

响应式 #

轮播支持每个屏幕尺寸的特定配置，使用responsiveOptions属性，该属性接收一个对象数组，其中每个对象定义最大宽度breakpoint，每页显示的项目数numVisible和要滚动的项目数numScroll。定义responsiveOptions后，轮播的numScroll和numVisible属性将在没有适用的断点时用作默认值。

无可用选项

<Carousel :value="products" :numVisible="3" :numScroll="1" :responsiveOptions="responsiveOptions">
    <template #item="slotProps">
        <div class="border border-surface-200 dark:border-surface-700 rounded m-2  p-4">
            <div class="mb-4">
                <div class="relative mx-auto">
                    <img :src="'https://primefaces.org/cdn/primevue/images/product/' + slotProps.data.image" :alt="slotProps.data.name" class="w-full rounded" />
                    <Tag :value="slotProps.data.inventoryStatus" :severity="getSeverity(slotProps.data.inventoryStatus)" class="absolute" style="left:5px; top: 5px"/>
                </div>
            </div>
            <div class="mb-4 font-medium">{{ slotProps.data.name }}</div>
            <div class="flex justify-between items-center">
                <div class="mt-0 font-semibold text-xl">${{ slotProps.data.price }}</div>
                <span>
                    <Button icon="pi pi-heart" severity="secondary" outlined />
                    <Button icon="pi pi-shopping-cart" class="ml-2"/>
                </span>
            </div>
        </div>
    </template>
</Carousel>

垂直 #

要创建垂直轮播，需要将orientation设置为vertical，并设置verticalViewPortHeight。

无可用选项

<Carousel :value="products" :numVisible="1" :numScroll="1" orientation="vertical" verticalViewPortHeight="330px" containerClass="flex items-center">
    <template #item="slotProps">
        <div class="border border-surface-200 dark:border-surface-700 rounded m-2  p-4">
            <div class="mb-4">
                <div class="relative mx-auto">
                    <img :src="'https://primefaces.org/cdn/primevue/images/product/' + slotProps.data.image" :alt="slotProps.data.name" class="w-full rounded" />
                    <Tag :value="slotProps.data.inventoryStatus" :severity="getSeverity(slotProps.data.inventoryStatus)" class="absolute" style="left:5px; top: 5px"/>
                </div>
            </div>
            <div class="mb-4 font-medium">{{ slotProps.data.name }}</div>
            <div class="flex justify-between items-center">
                <div class="mt-0 font-semibold text-xl">${{ slotProps.data.price }}</div>
                <span>
                    <Button icon="pi pi-heart" severity="secondary" outlined />
                    <Button icon="pi pi-shopping-cart" class="ml-2"/>
                </span>
            </div>
        </div>
    </template>
</Carousel>

无障碍 #

屏幕阅读器

轮播使用region角色，并且由于任何属性都传递到主容器元素，因此也可以使用诸如aria-label和aria-roledescription之类的属性。如果轮播不是在自动播放模式下，幻灯片容器的aria-live属性设置为“polite”，否则在自动播放中该值为“off”。

幻灯片具有group角色，其aria-label引用locale API的aria.slideNumber属性。类似地，aria.slide用作项目的aria-roledescription。非活动的幻灯片使用aria-hidden对阅读器隐藏。

下一个和上一个导航器是按钮元素，其aria-label属性默认情况下分别引用locale API的aria.prevPageLabel和aria.nextPageLabel属性，您仍然可以使用自己的aria角色和属性，因为通过使用nextButtonProps和prevButtonProps，任何有效属性都会隐式传递到按钮元素。

快速导航元素是按钮元素，其aria-label属性引用locale API的aria.pageLabel。当前页面用aria-current标记。

下一个/上一个键盘支持

按键功能
tab在轮播中移动焦点穿过交互式元素。
enter激活导航。
space激活导航。

快速导航键盘支持

按键功能
tab在活动的幻灯片链接中移动焦点。
enter激活聚焦的幻灯片链接。
space激活聚焦的幻灯片链接。
右箭头将焦点移动到下一个幻灯片链接。
左箭头将焦点移动到上一个幻灯片链接。
home将焦点移动到第一个幻灯片链接。
end将焦点移动到最后一个幻灯片链接。
PrimeVue 4.2.5 在 Vue 3 上，由 PrimeTek