The RhCarousel is a React component that renders a carousel using the swiperjs library. RhCarouselItem is a simple component that provides a structure for creating individual slides in the RhCarousel component.
Once installed, you can import the RhCarousel component into your React application:
import {RhCarousel,RhCarouselItem} from "@rhythm-ui/react"
Then, you can use the RhCarousel component in your JSX code:
<div className="flex justify-center max-w-5xl"> <div className="w-full lg:w-2/4 md:w-3/4"> <RhCarousel> {[ { src: "https://images.pexels.com/photos/12576758/pexels-photo-12576758.jpeg?cs=srgb&dl=pexels-edgar-santana-12576758.jpg&fm=jpg", alt: "image1", }, { src: "https://images.pexels.com/photos/3163895/pexels-photo-3163895.jpeg?cs=srgb&dl=pexels-gaetan-thurin-3163895.jpg&fm=jpg", alt: "image2", }, ].map((item, index) => { return ( <RhCarouselItem key={index}> <RhImage src={item.src} alt={item.alt} /> </RhCarouselItem> ); })} </RhCarousel> </div> </div>
Name | Type | Default | Description |
|---|---|---|---|
| indicators | boolean | Determines to show indicators for each slide and indicates an active slide | |
| loop | boolean | Determines the carousel to loop infinitely | |
| autoplay | boolean | Automatically swipe slide to next one | |
| slidesPerView | number | Determines the number of slides to be displayed in the viewport | |
| spaceBetween | number | Set space between two consecutive slides | |
| rewind | boolean | When enabled, clicking the ```next``` navigation button when on the last slide will slide back to the first slide. Clicking the ```prev``` navigation button when on the first slide will slide forward to the last slide. Should not be used together with a loop | |
| control | boolean | Determines to show navigation controls | |
| children | ReactElement<any, string | JSXElementConstructor<any>> | JSX element or a string | |
| className | string | ClassName for Carousel Parent | |
| tag | string | 'div' | Swiper container tag |
The indicators is a boolean that specifies whether to display slide indicators and highlight the active slide or not. If set to true, small dots or circles will be displayed at the bottom of the carousel to represent each slide, and the dot corresponding to the current slide will be highlighted.
<div className="flex justify-center max-w-5xl"> <div className="w-full lg:w-2/4 md:w-3/4"> <RhCarousel indicators> {[ { src: "https://images.pexels.com/photos/12576758/pexels-photo-12576758.jpeg?cs=srgb&dl=pexels-edgar-santana-12576758.jpg&fm=jpg", alt: "image1", }, { src: "https://images.pexels.com/photos/3163895/pexels-photo-3163895.jpeg?cs=srgb&dl=pexels-gaetan-thurin-3163895.jpg&fm=jpg", alt: "image2", }, ].map((item, index) => { return ( <RhCarouselItem key={index}> <RhImage src={item.src} alt={item.alt} /> </RhCarouselItem> ); })} </RhCarousel> </div> </div>
The loop is a boolean that specifies the carousel should continuously loop through the slides. If set to true, after reaching the last slide, the carousel will start again from the first slide.
<div className="flex justify-center max-w-5xl"> <div className="w-full lg:w-2/4 md:w-3/4"> <RhCarousel loop> {[ { src: "https://images.pexels.com/photos/12576758/pexels-photo-12576758.jpeg?cs=srgb&dl=pexels-edgar-santana-12576758.jpg&fm=jpg", alt: "image1", }, { src: "https://images.pexels.com/photos/3163895/pexels-photo-3163895.jpeg?cs=srgb&dl=pexels-gaetan-thurin-3163895.jpg&fm=jpg", alt: "image2", }, ].map((item, index) => { return ( <RhCarouselItem key={index}> <RhImage src={item.src} alt={item.alt} /> </RhCarouselItem> ); })} </RhCarousel> </div> </div>
The autoplay is a boolean that specifies the carousel will automatically move to the next slide after a set duration, without requiring any user interaction.
<div className="flex justify-center max-w-5xl"> <div className="w-full lg:w-2/4 md:w-3/4"> <RhCarousel loop autoplay> {[ { src: "https://images.pexels.com/photos/12576758/pexels-photo-12576758.jpeg?cs=srgb&dl=pexels-edgar-santana-12576758.jpg&fm=jpg", alt: "image1", }, { src: "https://images.pexels.com/photos/3163895/pexels-photo-3163895.jpeg?cs=srgb&dl=pexels-gaetan-thurin-3163895.jpg&fm=jpg", alt: "image2", }, ].map((item, index) => { return ( <RhCarouselItem key={index}> <RhImage src={item.src} alt={item.alt} /> </RhCarouselItem> ); })} </RhCarousel> </div> </div>
The slidesPerView determines the number of slides to show simultaneously within the carousel. By setting this prop to a value greater than one, you can display multiple slides at once, which creates a slideshow effect.
<div className="flex justify-center max-w-5xl"> <div className="w-full lg:w-2/4 md:w-3/4"> <RhCarousel slidesPerView={2} spaceBetween={10}> {[ { src: "https://images.pexels.com/photos/12576758/pexels-photo-12576758.jpeg?cs=srgb&dl=pexels-edgar-santana-12576758.jpg&fm=jpg", alt: "image1", }, { src: "https://images.pexels.com/photos/3163895/pexels-photo-3163895.jpeg?cs=srgb&dl=pexels-gaetan-thurin-3163895.jpg&fm=jpg", alt: "image2", }, { src: "https://images.pexels.com/photos/12383337/pexels-photo-12383337.jpeg?cs=srgb&dl=pexels-matteo-basile-12383337.jpg&fm=jpg", alt: "image3", }, { src: "https://images.pexels.com/photos/12320052/pexels-photo-12320052.jpeg?cs=srgb&dl=pexels-jhovani-morales-12320052.jpg&fm=jpg", alt: "image4", }, ].map((item, index) => { return ( <RhCarouselItem key={index}> <RhImage src={item.src} alt={item.alt} /> </RhCarouselItem> ); })} </RhCarousel> </div> </div>
The CarouselPrev and CarouselNext components are typically used as navigation controls for a carousel, with CarouselPrev serving as a button to move to the previous slide, and CarouselNext serving as a button to move to the next slide.
<div className="flex justify-center max-w-5xl"> <div className="lg:w-2/4 md:w-3/4 m-auto"> <RhCarousel> {[ { src: "https://images.pexels.com/photos/12576758/pexels-photo-12576758.jpeg?cs=srgb&dl=pexels-edgar-santana-12576758.jpg&fm=jpg", alt: "image1", }, { src: "https://images.pexels.com/photos/3163895/pexels-photo-3163895.jpeg?cs=srgb&dl=pexels-gaetan-thurin-3163895.jpg&fm=jpg", alt: "image2", }, ].map((item, index) => { return ( <RhCarouselItem key={index}> <RhImage src={item.src} /> </RhCarouselItem> ); })} <div className="flex justify-between"> <CarouselPrev>Prev</CarouselPrev> <CarouselNext>Next</CarouselNext> </div> </RhCarousel> </div> </div>
The rewind allows the carousel to go back to the first slide after reaching the last slide, and vice versa. If set to true, clicking the "next" button when on the last slide will return the carousel to the first slide, and clicking the "prev" button when on the first slide will move the carousel to the last slide.
<div className="flex justify-center max-w-5xl"> <div className="lg:w-2/4 md:w-3/4 m-auto"> <RhCarousel rewind> {[ { src: "https://images.pexels.com/photos/12576758/pexels-photo-12576758.jpeg?cs=srgb&dl=pexels-edgar-santana-12576758.jpg&fm=jpg", alt: "image1", }, { src: "https://images.pexels.com/photos/3163895/pexels-photo-3163895.jpeg?cs=srgb&dl=pexels-gaetan-thurin-3163895.jpg&fm=jpg", alt: "image2", }, { src: "https://images.pexels.com/photos/12383337/pexels-photo-12383337.jpeg?cs=srgb&dl=pexels-matteo-basile-12383337.jpg&fm=jpg", alt: "image3", }, { src: "https://images.pexels.com/photos/12320052/pexels-photo-12320052.jpeg?cs=srgb&dl=pexels-jhovani-morales-12320052.jpg&fm=jpg", alt: "image4", }, ].map((item, index) => { return ( <RhCarouselItem key={index}> <RhImage src={item.src} /> </RhCarouselItem> ); })} <div className="flex justify-between"> <CarouselPrev>Prev</CarouselPrev> <CarouselNext>Next</CarouselNext> </div> </RhCarousel> </div> </div>
Here you can develop custom slides by keeping the content inside of RhCarouselItem. This can be any valid React element, including text, images, or other components.
function customSlides() { const Testimonial = () => ( <p className="text-2xl font-medium text-center text-primary-800"> " Lorem, ipsum dolor sit amet consectetur adipisicing elit. Sint, ea dolor. Nulla necessitatibus voluptatibus tenetur illum expedita." </p> ); return ( <div className="flex justify-center max-w-5xl"> <div className="lg:w-2/4 md:w-3/4 m-auto"> <RhCarousel> <RhCarouselItem> <Testimonial /> </RhCarouselItem> <RhCarouselItem> <Testimonial /> </RhCarouselItem> <div className="flex justify-center gap-6 mt-8"> <CarouselPrev> <RhIcon className="text-3xl text-gray-400" icon="heroicons:arrow-left-circle" /> </CarouselPrev> <CarouselNext> <RhIcon className="text-3xl text-gray-400" icon="heroicons:arrow-right-circle" /> </CarouselNext> </div> </RhCarousel> </div> </div> ); }
The Thumbs, short for thumbnails, are small images that represent each item in the carousel. It provides a convenient and visual way for users to browse through multiple items. And we can tap on the thumbs to navigate to the corresponding item in the carousel.
function CarouselThumbs() { const [activeThumb, setActiveThumb] = useState(null); return ( <div className="w-full lg:w-2/4 md:w-3/4 m-auto"> <RhCarousel spaceBetween={10} loop={true} navigation={true} grabCursor={true} thumbs={{ swiper: activeThumb && !activeThumb.destroyed ? activeThumb : null, }} control={true} > {[ { src: "https://images.pexels.com/photos/12576758/pexels-photo-12576758.jpeg?cs=srgb&dl=pexels-edgar-santana-12576758.jpg&fm=jpg", alt: "image1", }, { src: "https://images.pexels.com/photos/3163895/pexels-photo-3163895.jpeg?cs=srgb&dl=pexels-gaetan-thurin-3163895.jpg&fm=jpg", alt: "image2", }, { src: "https://images.pexels.com/photos/12383337/pexels-photo-12383337.jpeg?cs=srgb&dl=pexels-matteo-basile-12383337.jpg&fm=jpg", alt: "image3", }, { src: "https://images.pexels.com/photos/12320052/pexels-photo-12320052.jpeg?cs=srgb&dl=pexels-jhovani-morales-12320052.jpg&fm=jpg", alt: "image4", }, ].map((item, index) => { return ( <RhCarouselItem key={index}> <RhImage src={item.src} className="m-0" /> </RhCarouselItem> ); })} </RhCarousel> <RhCarousel onSwiper={setActiveThumb} spaceBetween={10} slidesPerView={4} className="mt-2" > {[ { src: "https://images.pexels.com/photos/12576758/pexels-photo-12576758.jpeg?cs=srgb&dl=pexels-edgar-santana-12576758.jpg&fm=jpg", alt: "image1", }, { src: "https://images.pexels.com/photos/3163895/pexels-photo-3163895.jpeg?cs=srgb&dl=pexels-gaetan-thurin-3163895.jpg&fm=jpg", alt: "image2", }, { src: "https://images.pexels.com/photos/12383337/pexels-photo-12383337.jpeg?cs=srgb&dl=pexels-matteo-basile-12383337.jpg&fm=jpg", alt: "image3", }, { src: "https://images.pexels.com/photos/12320052/pexels-photo-12320052.jpeg?cs=srgb&dl=pexels-jhovani-morales-12320052.jpg&fm=jpg", alt: "image4", }, ].map((item, index) => { return ( <RhCarouselItem key={index}> <RhImage src={item.src} className="m-0" /> </RhCarouselItem> ); })} </RhCarousel> </div> ); }