0.6.0 • Published 3 years ago

react-just-carousel v0.6.0

Weekly downloads
79
License
MIT
Repository
github
Last release
3 years ago

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:

PropertyRequiredTypeDefaultDescription
renderLeftButtonnoReact.ReactNodenullCustom render button left
renderRightButtonnoReact.ReactNodenullCustom render button right
isRelativenobooleantrueDisabling relative wrappers for buttons, only for custom render controls
marginBlocknonumber0You 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.
onMoveSlidenogi(arg0: IMoveSlideEvent) => void;nulltriggered every time the slide is switched and returns an object with the following content as a parameter for the callback function: IMoveSlideEvent
stepMovenonumber1specifies how many slides will be flipped at once
deadZoneTouchXnonumber5for fine-tuning touch events, dead zones where no events are processed
deadZoneTouchYnonumber5for fine-tuning touch events, dead zones where no events are processed

IMoveSlideEvent

PropertytypeDescription
sidesideEnumTypethe direction of the carousel, enum 'left' or 'right'
isLeftEndbooleanend of the carousel to the left
isRightEndbooleanend of the carousel to the right
offsetCountnumberoffset of the number of slides
0.6.0

3 years ago

0.5.2

3 years ago

0.5.1

3 years ago

0.5.0

3 years ago

0.4.2

3 years ago

0.4.1

3 years ago

0.4.0

3 years ago

0.3.2

3 years ago

0.3.1

3 years ago

0.3.0

3 years ago

0.2.0

3 years ago

0.1.0

3 years ago