import { Slideshow } from '@zeal-ui/core';
Editable Code
<SlideShow slides={['Slide 1', 'Slide 2', 'Slide 3']} width="15rem" height="10rem" />;
Editable Code
const trees = (<Imagesrc="https://images.pexels.com/photos/1770809/pexels-photo-1770809.jpeg"alt="trees"width="10rem"height="10rem"/>);const stream = (<Imagesrc="https://images.pexels.com/photos/3225517/pexels-photo-3225517.jpeg"alt="stream"width="10rem"height="10rem"/>);const mountains = (<Imagesrc="https://images.pexels.com/photos/1785493/pexels-photo-1785493.jpeg"alt="mountaines"width="10rem"height="10rem"/>);render(<SlideShow slides={[stream, trees, mountains]} width="18rem" height="auto" color="success" />,);
width
Description
It is used to set the width of the slideshow.
Values
String with valid width.
height
Description
It is used to set the height of the slideshow.
Values
String with valid height.
color
Description
It is used to set the color of the slideshow.
Values
primary | secondary | accent | error | warning | success
slides
Description
It is used to set the slides in the slideshow.
Values
React component.
prev
Description
It is used to set the previous indicator in the slideshow.
Values
Icon or a react component.
next
Description
It is used to set the next indicator in the slideshow.
Values
Icon or react component.
slidesCount
Description
It is used to set the number of slides that will be shown at a time in the slideshow after which user has to click the next indicator to see more slides.
Values
Number.
arrowColor
Description
It is used to set the color of the previous and the next arrow.
Values
primary | secondary | accent | error | warning | success
To learn about customizing the components check this section of the docs.