IT Tools

Handy tools for developer

Compare Texts

WebView Playground

ReactJS Playground

Json Web Tokens

Regular Expressions

Image Crop

Color Picker

QR Code

Generate Text

Generate API Response

JSON Formatter

Number Converter

Random Wheel

Ctrl + K

Carousel

Preview

3

4

5

1

2

3

4

5

1

2

3

Show code

<Carousel
  show={3}
  infiniteLoop={true}
  showIndicator=true
  autoplay={3000}
>
  <div className="bg-red-500">
    1
  </div>
  <div className="bg-green-500">
    2
  </div>
  <div className="bg-blue-500">
    3
  </div>
  <div className="bg-orange-500">
    4
  </div>
  <div className="bg-purple-500">
    5
  </div>
</Carousel>

Docs

Name	Description	Default	Control
infiniteLoop	Loop the carousel when reaching the end	false	falsetrue
showIndicator	Show the indicator of pages	true	falsetrue
autoplay	Autoplay interval in milliseconds. Needs infinite loop	3000
disabledAutoplay	Disable autoplay	false	falsetrue
show	Number of items to show	1
children *	Body content of Carousel `ReactNode`	-	-
className	Wrapper class	-	-
itemClassName	Class of each child item	-	-

IT Tools

Tools

UI Components

Carousel

Preview

3

4

5

1

2

3

4

5

1

2

3

Docs