• v10(10.9.1)
    • v9(9.6.3)
    1. Installation
    2. Configuration
    3. Playground
    1. Form
      1. AutoComplete
      2. Calendar
      3. CascadeSelect
      4. Checkbox
      5. Chips
      6. ColorPicker
      7. Dropdown
      8. Editor
      9. FloatLabelNEW
      10. IconFieldNEW
      11. InputGroup
      12. InputMask
      13. InputSwitch
      14. InputNumber
      15. InputOtpNEW
      16. InputText
      17. InputTextarea
      18. KeyFilter
      19. Knob
      20. Listbox
      21. Mention
      22. MultiSelect
      23. MultiStateCheckbox
      24. Password
      25. RadioButton
      26. Rating
      27. SelectButton
      28. Slider
      29. TreeSelect
      30. TriStateCheckbox
      31. ToggleButton
    2. Button
      1. Button
      2. Speed Dial
      3. SplitButton
    3. Data
      1. DataTable
      2. DataView
      3. DataScroller
      4. OrderList
      5. Org Chart
      6. Paginator
      7. PickList
      8. Tree
      9. TreeTable
      10. Timeline
      11. VirtualScroller
    4. Panel
      1. Accordion
      2. Card
      3. Deferred
      4. Divider
      5. Fieldset
      6. Panel
      7. ScrollPanel
      8. Splitter
      9. StepperNEW
      10. TabView
      11. Toolbar
    5. Overlay
      1. ConfirmDialog
      2. ConfirmPopup
      3. Dialog
      4. OverlayPanel
      5. Sidebar
      6. Tooltip
    6. File
      1. Upload
    7. Menu
      1. Breadcrumb
      2. ContextMenu
      3. Dock
      4. MegaMenu
      5. Menu
      6. Menubar
      7. PanelMenu
      8. Steps
      9. TabMenu
      10. TieredMenu
    8. Chart
      1. Chart.js
    9. Messages
      1. Message
      2. Messages
      3. Toast
    10. Media
      1. Carousel
      2. Galleria
      3. Image
    11. Misc
      1. Avatar
      2. Badge
      3. BlockUI
      4. Chip
      5. Inplace
      6. MeterGroup
      7. ScrollTop
      8. Skeleton
      9. ProgressBar
      10. ProgressSpinner
      11. Ripple
      12. StyleClass
      13. Tag
      14. Terminal
    1. Overview
    2. Colors
    3. SASS API
    4. Unstyled Mode
      1. Overview
      2. Bootstrap
      3. Bulma
  1. Pass Through
  2. Tailwind
  3. Figma UI Kit
    1. Prime IconsUPDATED
    2. Custom Icons
    1. Lifecycle
      1. useMountEffect
      2. useUpdateEffect
      3. useUnmountEffect
    2. Listener
      1. useEventListener
      2. useOverlayListener
      3. useOverlayScrollListener
      4. useResizeListener
    3. Element
      1. useClickOutside
      2. useIntersectionObserver
      3. useMouse
      4. useMove
    4. Timer
      1. useInterval
      2. useTimeout
    5. State
      1. useCounter
      2. useDebounce
      3. useFavicon
      4. usePrevious
      5. useStorage
  4. Templates
  5. New PrimeBlocksSoon
  6. PrimeFlex CSS
    1. Accessibility
    2. CSS Layer
    3. PrimeTV
    1. Discord
    2. Forum
    3. PRO Support
  7. Contribution
    1. About Us
    2. Roadmap
    3. Source Code
    4. Changelog
    5. Store
    6. Twitter
    7. Newsletter
    8. PrimeGear

Carousel

Carousel is a content slider featuring various customization options.

Import#


import { Carousel } from 'primereact/carousel';
         

Basic#

Carousel requires a collection of items as its value along with a template to render each item.

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

    Circular#

    When autoplayInterval is defined in milliseconds, items are scrolled automatically. In addition, for infinite scrolling circular property needs to be added which is enabled automatically in auto play mode.

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

      Num Scroll#

      Number of items to scroll is specified with the numScroll option.

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

        Responsive#

        Carousel supports specific configuration per screen size with the responsiveOptions property that takes an array of objects where each object defines the max-width breakpoint, numVisible for the number of items items per page and numScroll for number of items to scroll. When responsiveOptions is defined, the numScroll and numVisible properties of the Carousel are used as default when there is breakpoint that applies.

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

          Vertical#

          To create a vertical Carousel, orientation needs to be set to vertical along with a verticalViewPortHeight.

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

            Accessibility#

            Screen Reader

            Carousel uses region role and since any attribute is passed to the main container element, attributes such as aria-label and aria-roledescription can be used as well. The slides container has aria-live attribute set as "polite" if carousel is not in autoplay mode, otherwise "off" would be the value in autoplay.

            A slide has a group role with an aria-label that refers to the aria.slideNumber property of the locale API. Similarly aria.slide is used as the aria-roledescription of the item. Inactive slides are hidden from the readers with aria-hidden.

            Next and Previous navigators are button elements with aria-label attributes referring to the aria.nextPageLabel and aria.firstPageLabel properties of the locale API by default respectively, you may still use your own aria roles and attributes as any valid attribute is passed to the button elements implicitly by using nextButtonProps and prevButtonProps.

            Quick navigation elements are button elements with an aria-label attribute referring to the aria.pageLabel of the locale API. Current page is marked with aria-current.

            Next/Prev Keyboard Support

            KeyFunction
            tabMoves focus through interactive elements in the carousel.
            enterActivates navigation.
            spaceActivates navigation.

            Quick Navigation Keyboard Support

            KeyFunction
            tabMoves focus through the active slide link.
            enterActivates the focused slide link.
            spaceActivates the focused slide link.
            right arrowMoves focus to the next slide link.
            left arrowMoves focus to the previous slide link.
            homeMoves focus to the first slide link.
            endMoves focus to the last slide link.
                          PrimeReact 10.9.1 by PrimeTek