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'>
  leftButton	Function	This comes in handy when you want to pass your own customized button for toggling between slides. This prop refers to the button that will help you navigate to the previous slide
  rightButton	Function	This comes in handy when you want to pass your own customized button for toggling between slides. This prop refers to the button that will help you navigate to the next slide

## License

MIT © Srijan1878