Simple, Touch-Friendly carousel component for @reactjs #reactjs #react-component

Simple, Touch-Friendly carousel component for @reactjs #reactjs #react-component

  • The basic carousel sample.The Carousel component returns a callback function with the following arguments.
  • and must be passed down to the elements – – But the Carousel component also returns other arguments, like , , , , , – – For the component to work, for example, on mobile devices, set the value to true for touching.
  • Set the value for and place the argument in your jsx template – – When you stop moving your mouse triggers a function which calculates the position of the elements.
  • For example, you want to fetch data or trigger some function when you reach the end of the carousel.
  • The default value for is 0 – – must be passed to the component – – Use the arguments and from the callback.

react-awesome-carousel – Simple, Touch-Friendly carousel component for React.js

GitHub is home to over 20 million developers working together to host and review code, manage projects, and build software together.

via NPM

via Yarn

via CDN (unpkg)

import “react-awesome-carousel/react-awesome-carousel.css”;

via CDN (unpkg)

The basic carousel sample.The Carousel component returns a callback function with the following arguments. So, you can deeply customize the render.

must be passed down to the elements

{ (galleryProps, ulProps, data) => { return (

    { this . state . data . map(renderItem) }

); } }

For the component to work, for example, on mobile devices, set the value to true for touching.

argument in your jsx template

{ (galleryProps, ulProps, data, step, goTo, next, prev, Scrollbar) => { return (

    { this . state . data . map(renderItem) }

{ Scrollbar }

); } } ;

When you stop moving your mouse triggers a function which calculates the position of the elements.

For example, you want to fetch…

GitHub