Staw NPM | npm.io

Staw

One Carousel to rule them all. Simple like recompose, weightless like a leaf and very easy to Staw (badum tsss)

Installing

In your project folder, type on console

yarn add staw

or you can use NPM aswell

npm i staw

Usage

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

Props

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) => {}

Example

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