Carousel

Overview

The Carousel component is an essential tool for creating dynamic and engaging product displays on your e-commerce website. It allows you to showcase multiple images or items in a rotating slideshow, enhancing the visual appeal and user interaction on your platform.

Usage

// importing component
import { Carousel } from "@unbxd-ui/react-search-components";
 
// import the style for the component
import "@unbxd-ui/react-search-components/styles/carousel.css";

If the styles import does not work, use the following code to import it:

require.resolve("@unbxd-ui/react-search-components/styles/carousel.css")

Live Demo

<

>

// code used for above example
import { Carousel } from "@unbxd-ui/react-search-components";
 
<Carousel 
    visibleCount={2} 
    list={[
        "https://imageUrl1.png", 
        "https://imageUrl2.png", 
        "https://imageUrl3.png", 
        "https://imageUrl4.png"
    ]} 
/>

Props

• The number of images that must be shown at a time.
• Default Value: 1.

• A boolean value which indicates if the next and previous arrows must be shown or not.
• Default Value: true.

• An array of URLs of the images that must be shown.

• The URL of the image that must be used for an image in case there is an error in displaying the original image.

• A function that is invoked when a carousel image is clicked.

• This prop will be used to style the component.
• The value must use a defined structure (the structure can be seen in the following example).
• The keys in the structure must be the same while the values can changed as per the user's choice.

styles={{
	wrapper: "slider-container", // used for the wrapper
	arrow: "arrow", // used for the next/prev arrows
	leftArrow: "left-arrow", // used for the prev arrow
	rightArrow: "right-arrow", // used for the next arrow
	imageWrapper: "carousel-images", // used for the wrapper around the carousel images
	thumbnail: "thumbnail", // used for each image thumbnail
	activeThumbnail: "active" // used for the active image thumbnail
}}

Related Components

Products