@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 |