One Carousel to rule them all. Simple like recompose, weightless like a leaf and very easy to Staw (badum tsss)
In your project folder, type on console
yarn add staw
or you can use NPM aswell
npm i staw
Import the component from Node Modules
import Staw from 'staw';
Input all slides section as children
<Staw>
child1
child2
child3
</Staw>Each child will be a slide
| Name | Description | Default Value |
|---|---|---|
| visibleGutter | amount of next slide that should appear in px, if the slide isn't the first one or the last one, this amount is halfed in the next and previous slide. | 0 |
| startAt | number (array index based) that defines the initial slide that's considered 'active' | 0 |
| hasDots | boolean that define if have or not dots for navigation. | true |
| hasArrows | boolean that define if have or not arrow for navigation. | true |
| customArrow | Add a custom arrow markup | null |
| customNavigation | An array of strings. Each string will behave as a Dot behaves | false |
| alignAll | boolean that aligns the first and the last child in the center | false |
| slidesPerView | value that will define the quantity slides to show, your can use number or 'auto' | 1 |
| onDotClick(cardIndex) | a callback that executes on dot click | (cardIndex) => {} |
| onPrevArrowClick(currentSlide) | a callback that executes on prev arrow click, before currentSlide update | (currentSlide) => {} |
| onNextArrowClick(currentSlide) | a callback that executes on next arrow click, before currentSlide update | (currentSlide) => {} |
| onSwipeLeftToRight(currentSlide) | same as prevArrowClick but for swipe | (currentSlide) => {} |
| onSwipeRightToLeft(currentSlide) | same as nextArrowClick but for swipe | (currentSlide) => {} |
<Staw
visibleGutter={30}
startAt={0}
hasDots={false}
customNavigation={['First','Second','Third']}
onPrevArrowClick={(currentSlide) => {
console.log(currentSlide)
}}
>
<div className="firstSlide">
<div className="anyClass">content of my first slide</div>
</div>
<div className="secondSlide">
<div className="anyClass">content of my second slide</div>
</div>
<div className"thirdSlide">
<div className="anyClass">a lot of items</div>
<div className="anyClass">in the same</div>
<div className="anyClass">slide depends only of yours css</div>
</div>
</Staw>- React ^16.0.0
- ReactDOM ^16.0.0
- Recompose ^0.26.0
Licensed under the MIT license.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent