A customizable and feature-rich carousel component for React.
Install the package using npm:
npm install react-featured-carousel
Import the Carousel component and use it in your React application:
import React from "react";
import Carousel from "react-featured-carousel";
const App = () => {
const carouselImages = [
"https://example.com/image1.jpg",
"https://example.com/image2.jpg",
"https://example.com/image3.jpg",
];
return (
<div>
<Carousel
images={carouselImages}
autoplayInterval={5000}
customStyles={{ carousel: { maxWidth: "800px" } }}
showDots={true}
showThumbnails={false}
slidesContainerHeight="80vh"
showArrowIcons={true}
/>
</div>
);
};
export default App;
An array of URLs representing the images to be displayed in the carousel.
The interval (in milliseconds) for automatic slide transition. Set to 0 to disable autoplay.
Show or hide navigation dots at the bottom of the carousel. Defaults to true.
Show or hide image thumbnails below the carousel. Defaults to false.
The height of the slides container. Accepts values like "80vh", "500px", etc. Defaults to "60vh".
Show or hide navigation arrow icons. Defaults to true.
An object allowing you to customize the carousel's style. Example:
customStyles={{
carousel: { maxWidth: "800px" },
slide: { border: "2px solid red" },
}}