Carousel

Import Logo component.

import { Carousel } from '@/components/Carousel'
import { Image } from '@/components/Image'
import { CarouselItem } from '@/components/Carousel/CarouselItem'
import { CarouselCaption } from '@/components/Carousel/CarouselCaption'

Slides only

<Carousel>
      <CarouselItem>
        <Image className="block w-full" src="http://landing.interiordesignwala.com/img/Mr.%20&%20Mrs.%20Jatin%20&%20Parul.png" alt="slide 1" />
      </CarouselItem>
      <CarouselItem>
        <Image className="block w-full" src="http://landing.interiordesignwala.com/img/Mr.%20&%20Mrs.%20Jatin%20&%20Parul.png" alt="slide 3" />
      </CarouselItem>
    </Carousel> 

With controls

Adding in the previous and next controls

<Carousel controls>
      <CarouselItem>SX
        <Image className="block w-full" src="http://landing.interiordesignwala.com/img/Mr.%20&%20Mrs.%20Jatin%20&%20Parul.png" alt="slide 1" />
      </CarouselItem>
      <CarouselItem>
        <Image className="block w-full" src="http://landing.interiordesignwala.com/img/Mr.%20&%20Mrs.%20Jatin%20&%20Parul.png" alt="slide 3" />
      </CarouselItem>
    </Carousel>

With indicators

<Carousel indicators >
      <CarouselItem>
        <Image className="block w-full" src="http://landing.interiordesignwala.com/img/Mr.%20&%20Mrs.%20Jatin%20&%20Parul.png" alt="slide 1" />
      </CarouselItem>
      <CarouselItem>
        <Image className="block w-full" src="http://landing.interiordesignwala.com/img/Mr.%20&%20Mrs.%20Jatin%20&%20Parul.png" alt="slide 3" />
      </CarouselItem>
    </Carousel>

With captions

<Carousel indicators >
      <CarouselItem>
        <Image className="block w-full" src="http://landing.interiordesignwala.com/img/Mr.%20&%20Mrs.%20Jatin%20&%20Parul.png" alt="slide 1" />
         <CarouselCaption className="block">
             <h5>First slide</h5>
               <p>Some representative placeholder content for the first slide.</p>
         </CarouselCaption>
      </CarouselItem>
 </Carousel>