轮播图

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

导入#


import { Carousel } from 'primereact/carousel';

基本用法#

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


<Carousel value={products} numVisible={3} numScroll={3} responsiveOptions={responsiveOptions} itemTemplate={productTemplate} />

循环#

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


<Carousel value={products} numVisible={3} numScroll={3} responsiveOptions={responsiveOptions} className="custom-carousel" circular
autoplayInterval={3000} itemTemplate={productTemplate} />

滚动数量#

要滚动的项目数可以使用 numScroll 选项指定。


<Carousel value={products} numScroll={1} numVisible={3} responsiveOptions={responsiveOptions} itemTemplate={productTemplate} />

响应式#

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


<Carousel value={products} numScroll={1} numVisible={3} responsiveOptions={responsiveOptions} itemTemplate={productTemplate} />

垂直#

要创建垂直轮播图，需要将 orientation 设置为 vertical，同时指定一个 verticalViewPortHeight。


<Carousel value={products} numVisible={1} numScroll={1} orientation="vertical" verticalViewPortHeight="360px" itemTemplate={productTemplate} />

辅助功能#

屏幕阅读器

轮播图使用 region 角色，由于任何属性都传递给主容器元素，因此也可以使用诸如 aria-label 和 aria-roledescription 之类的属性。如果轮播图不在自动播放模式下，则幻灯片容器的 aria-live 属性设置为“polite”，否则在自动播放模式下该值将为“off”。attribute set as "polite" if carousel is not in autoplay mode, otherwise "off" would be the value in autoplay.

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

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

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

下一个/上一个键盘支持

按键	功能
tab	在轮播图中移动焦点到交互元素。
enter	激活导航。
空格键	激活导航。

快速导航键盘支持

按键	功能
tab	在活动幻灯片链接中移动焦点。
enter	激活聚焦的幻灯片链接。
空格键	激活聚焦的幻灯片链接。
右箭头	移动焦点到下一个幻灯片链接。
左箭头	移动焦点到上一个幻灯片链接。
home	移动焦点到第一个幻灯片链接。
end	移动焦点到最后一个幻灯片链接。