react-carousel

This pure react carousel, without depending

This is a pure react carousel, without dependencies, without jquery, not a mixer-combine, without unnecessary functions, it is not a slider, the carousel does not know how to make coffee and bring Slippers :)

This is a carousel, written in typescript for react, has a lightweight, supports touch, fully responsive, supports content of different heights and widths, infinite loop, and other features that are necessary for the carousel.

Installation

npm install react-just-carousel
// or 
yarn react-just-carousel

Usage

React Component:

<div> 
    <Carousel>
        {testData.map((item, i) => (
             <ItemBlock key={i}/>
        ))}
    </Carousel>
</div>

Style css:

import 'react-just-carousel/dist/styles.css'; // base style

Props:

| Property | Required | Type | Default | Description | |-------------------|:--------:|:-----------------:|:--------:|:---------------------------| | renderLeftButton | no | React.ReactNode | null | Custom render button left | | renderRightButton | no | React.ReactNode | null | Custom render button right | | isRelative | no | boolean | true | Disabling relative wrappers for buttons, only for custom render controls | | marginBlock | no | number | 0 | You can make your own indents between slides in css and not use this property, but you can use this property, thanks to this property, the slips of the extreme slides will be "eaten", if there are no complex design ideas, I advise you to use this property for the margin between slides. | | onMoveSlide | no | gi(arg0: IMoveSlideEvent) => void; | null | triggered every time the slide is switched and returns an object with the following content as a parameter for the callback function: IMoveSlideEvent | | stepMove | no | number | 1 | specifies how many slides will be flipped at once | | deadZoneTouchX | no | number | 5 | for fine-tuning touch events, dead zones where no events are processed | | deadZoneTouchY | no | number | 5 | for fine-tuning touch events, dead zones where no events are processed |

IMoveSlideEvent

| Property | type | Description | |------------|:------------:|:-----------:| | side | sideEnumType | the direction of the carousel, enum 'left' or 'right'| | isLeftEnd | boolean | end of the carousel to the left | | isRightEnd | boolean | end of the carousel to the right | | offsetCount| number | offset of the number of slides |