miguelez11 / react-swiping-carousel

react-swiping-carousel

A hackable carousel for react (mobile and desktop)

Install

npm install react-swiping-carousel

Usage

import React, { Component } from 'react'

import {CarouselComponent} from 'react-swiping-carousel'

class Example extends Component {
  render() {
    return (
		<CarouselComponent>
			<div>
				<p>You can insert any tag as child</p>
			</div>
			<p>Even a lonely p</p>
			<img src="" alt="Or an image" />
		</CarouselComponent>
	)
  }
}

The Carousel will expand 100% of its parent, then will calculate the space of each child and voilá magic

I'm currently working on detect windows resizes and/or element size rescaling for making the component fully responsive

Props

The Carousel have some flags which provide you some customization:

FlagName	Values	Action
align	"left" || "center" || "right"	This sets the alignment for the selected item
align	{first: "left" || "center" || "right", last: "left" || "center" || "right", nth: "left" || "center" || "right"}	This sets the alignment for the first element, the last and the selected item
length	integer	The number of items to use as swipeable
margin	float	The space between items
scrollDistance	float	The distance the user needs to swipe for changes to take effect

License

MIT © MIGUELez11