Carousel

Is an effective way of displaying multiple images or content in a single space.

It not only helps in saving screen space, but also encourages visitors to focus on important website content and improves the overall visual appeal effectively.

Carousel

Anatomy

<Carousel>
  <Carousel.LeftArrow>...</Carousel.LeftArrow>
  <Carousel.Reel>
    <Carousel.Item>...</Carousel.Item>
  <Carousel.Reel>
  <Carousel.Indicators/>
  </Carousel.RightArrow>...</Carousel.RightArrow>
</Carousel>

Carousel

  • 0
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24

Customized Arrows

  • 0
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24

Indicators

  • 0
  • 1
  • 2
  • 3
  • 4

Spaces

  • 0
  • 1
  • 2
  • 3
  • 4

Visible indices

  • -1--1
  • -1--1
  • -1--1
  • -1--1
  • -1--1
  • -1--1
  • -1--1
  • -1--1
  • -1--1
  • -1--1
  • -1--1
  • -1--1
  • -1--1
  • -1--1
  • -1--1
  • -1--1
  • -1--1
  • -1--1
  • -1--1
  • -1--1
  • -1--1
  • -1--1
  • -1--1
  • -1--1
  • -1--1

Select index

  • 0
  • 1
  • 2
  • 3
  • 4

Autoslide

  • 0
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24

Carousel props

NameTypeRequiredDefaultDescription
scrollTonumberNo-Index of item to scroll to
stepnumberNo5Step of scroll
selectedIndexnumberNo-Index of selected item
Render Props:
scrollLeftToStep() => voidNo-Scrolls left
scrollRightToStep() => voidNo-Scrolls right
canScrollLeftbooleanNo-Whether can scroll left
canScrollRightbooleanNo-Whether can scroll right
firstVisibleIndexnumberNo-Index of the first visible item
lastVisibleIndexnumberNo-Index of the last visible item
autoSlideDelaynumberNo-Interval of auto sliding in milliseconds. No auto sliding if undefined