Carousel

Carousels are a way to display content, mostly images, with slides. It is a common way to showcase various types of content.

Basic implementation

To start using the carousel component, you just need to import the component and add it to your own.

However, to use it you need to have some components to display as slides. You can wrap each content in an HTML tag, and the carousel component will slice each of the child inside of it, as shown in the example.

    
       
 import { Carousel } from "cloth-ui"; 
 
 export const BasicComponent = () => { 

  return ( 

    <Carousel> 

      <div id="slide-1"> 

        Slide 1 

      </div> 

      <div id="slide-2"> 

        Slide 2 

      </div> 

      <div id="slide-3"> 

        Slide 3 

      </div> 

    </Carousel> 

  ); 
 }; 
 
    
  

Note that each of the components inside of the Carousel should be styled.

Autoslide on Carousel

You can specify the Carousel component to autoslide each of the components inside it, as well as the time delay between autoslides (in miliseconds).

    
       
 import { Carousel } from "cloth-ui"; 
 
 // 5000 miliseconds equals to 5 seconds, so the autoslide will last 5 seconds 
 export const SlideComponent = () => { 

  return ( 

    <Carousel autoSlide autoSlideInterval={5000}> 

      <div id="slide-1"> 

        Slide 1 

      </div> 

      <div id="slide-2"> 

        Slide 2 

      </div> 

      <div id="slide-3"> 

        Slide 3 

      </div> 

    </Carousel> 

  ); 
 }; 
 
    
  

Note that each of the components inside of the carousel should be styled.