react-swiping-carousel

A fancy carousel which enables swiping on it. Works on all devices

Usage no npm install needed!

<script type="module">
  import reactSwipingCarousel from 'https://cdn.skypack.dev/react-swiping-carousel';
</script>

README

react-swiping-carousel

A hackable carousel for react (mobile and desktop)

NPM JavaScript Style Guide

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