React.js Next.js Carousel

Typescript Supported Powerful, lightweight and fully customizable carousel component for React.js and Next.js apps.

Slide Animation Effect

Fade Animation Effect

Important

I don't have any time available to keep maintaining this package. If you have any request, try to sort it within the community. I'm able to merge pull requests that look safe from time to time but no commitment on timelines here. Feel free to fork it and publish under other name if you are in a hurry or to use another component.

Features

• Responsive
• Mobile friendly
• Server side rendering compatible
• Support React.js and Next.js with Typescript
• Custom animation duration
• Auto play w/ custom interval
• Supports images, videos, text content or anything you want. Each direct child represents one slide!
• Highly customizable:
  • Custom thumbs
  • Custom arrows
  • Custom indicators
  • Custom slides
  • Custom animation handlers

Installing as a package

• npm install reactjs-nextjs-carousel.
• yarn add reactjs-nextjs-carousel.

Usage

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import Carousel  from 'reactjs-nextjs-carousel';

class DemoCarousel extends Component {
   const slides = [
    "https://fastly.picsum.photos/id/11/2500/1667.jpg?hmac=xxjFJtAPgshYkysU_aqx2sZir-kIOjNR9vx0te7GycQ",
    "https://fastly.picsum.photos/id/13/2500/1667.jpg?hmac=SoX9UoHhN8HyklRA4A3vcCWJMVtiBXUg0W4ljWTor7s",
    "https://fastly.picsum.photos/id/12/2500/1667.jpg?hmac=Pe3284luVre9ZqNzv1jMFpLihFI6lwq7TPgMSsNXw2w",
   ]
    render() {
        return (
            <Carousel slides={slides} autoSlide={true} carouselWidth={"30rem"} effect="fade" autoSlideInterval={3000}/>
        );
    }
});

ReactDOM.render(<DemoCarousel />, document.querySelector('.demo-carousel'));

Props

Name	Value	Description
slides	array	Array of image url.
carouselWidth	string	The width of the carousel, defaults to 20rem.
thumbWidth	string	The width of the carousel, defaults to 3rem.
autoSlide	boolean	Change the slide automatically, default to false.
autoSlideInterval	number	Change the slide automatically based on interval , default to 2000.
effect	slide or fade	Animation for change slides.
controllArrowSize	number	Width of the Arrows, defaults to 20.
indicatorSize	string	The size of the indicator, defaults to 0.40rem.
showControlArrow	boolean	Show carousel Arrow, defaults to true.
showIndicators	boolean	Show carousel Arrow, defaults to true.
showThumbs	boolean	Show carousel Arrow, defaults to true.