reactjs-nextjs-carousel v0.0.7

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