@computeruniverse/react-carousel

Usage

import React, { useState } from 'react';
import { ReactCarousel } from '@computeruiverse/react-carousel';
import '@computeruiverse/react-carousel/lib/index.css';

const MyCarousel: React.VFC = () => {
    const [activeSlide, setActiveSlide] = useState(0);
    const items = [];
    for (let i = 0; i < 5; i++) {
        items.push(i);
    }

    return (
        <>
            <ReactCarousel
                isStatic={true}
                slidesToShow={4}
                activeSlide={activeSlide}
                itemCount={items.length}
                autoplayInterval={5000}
                movementTension={50}
                movementFriction={20}
                onChange={(activeIndex) => {
                    console.log('activeIndex', activeIndex);
                    setActiveSlide(activeIndex);
                }}
                itemFactory={(index, preloading) => {
                    return (
                        <div
                            key={index}
                            style={{
                                height: '200px',
                                fontSize: '60px',
                                backgroundColor: (index + 1) % 2 === 0 ? 'green' : 'yellow',
                            }}
                        >
                            {index}
                        </div>
                    );
                }}
            />

            <button onClick={() => setActiveSlide(activeSlide - 1)}>Prev</button>
            <button onClick={() => setActiveSlide(activeSlide + 1)}>Next</button>
        </>
    );
};

export default MyCarousel;

Props

Name	Type	Default	Description
itemFactory	(index: number, preloading: boolean) => React.ReactElement (required)	undefined	Is called at the creation of the carousel and basically returns an array of slides to show. Important the return value is cached
isStatic	boolean (required)	undefined
itemCount	number (required)	undefined	Count of how many Slides are in the carousel
activeSlide	number (required)	`undefined	Index of the currently active slide, if the value is changed the carousel slides to this index
slidesToShow	number	1	Value of how many slides the carousel shows at the same time
defaultSlide	number	0	Position of the default slide, you're probably don't need this value
onChange	(activeIndex: number) => void	undefined	Triggers every time the carousel moves
autoplayInterval	number (ms)	undefined	Sets the interval time for the carousel in milliseconds
movementTension	number	50
movementFriction	number	20
slideCssClasses	{ default: string, active: string }	undefined	Sets a default and/or active class to the slides so that you can style your slides in an easier way