react-swoop
A package that makes building beautiful carousels incredibly easy.
Install
npm install --save react-swoop
Usage
import React, { Component } from 'react'
import { Carousel } from 'react-swoop'
const App = () => {
const config = {
showTabs: true,
loop: false,
auto: false,
animationType: 'fade'
}
return (
<Carousel config={config} active={1}>
<Carousel.Content>
<img src={'http://placekitten.com/200/300'} />
</Carousel.Content>
<Carousel.Content>
<img src={'http://placekitten.com/200/301'} />
</Carousel.Content>
</Carousel>
)
}
OR
import React, { Component } from 'react'
import { Carousel } from 'react-swoop'
const App = () => {
const config = {
showTabs: true,
loop: false,
auto: false,
animationType: 'fade'
}
return (
<Carousel config={config} active={1}>
<div>
<img src={'http://placekitten.com/200/300'} />
</div>
<div>
<img src={'http://placekitten.com/200/301'} />
</div>
</Carousel>
)
}
The Carousel Component takes in two parameters, active and config
- active: String, It denotes the index of the active slide.
-
The config prop is an object and can have multiple fields that will determine the behavior of the Carousel, Detailed description of the props is given below
Prop Name Prop Type Prop Description showTabs Boolean Toggling this option will let turn on or off the visiblity for the dots shown on the bottom of the Carousel auto Boolean Passing this option as true will turn on the feature of auto-switching between slides after an interval. interval Boolean Passing this option as true will turn on the feature of auto-switching between slides after an interval. animationType String This denotes the type of animation you want to see while switching between slides speed Number This denotes the speed of the animation in seconds while switching sldies. If you a animation duration of 500 mili seconds, simply pass '0.5' as value. draggable Boolean Turning this on will let you drag and switch between slides. direction String This refers to the direction of the Slider. It supports two values <'horizontal || 'vertical'>
MIT © Srijan1878