react-swipe-gallery

0.6.3 • Public • Published

React Swipe Gallery Component

Swipe gallery over React

You can view an online example in http://amadormf.github.io/react-swipe-gallery/

Install

npm install --save react-swipe-gallery

Example

import SwipeGallery from 'react-swipe-gallery'
 
//elements only for example
function getElements(numElements) {
  const elements = [];
  for (let i = 0; i < numElements; ++i) {
    elements.push(
      <div className="subelement" key={i}>
        { i }
      </div>
    );
  }
  return elements;
}
 
//swipe gallery example
const gallery = (
  <SwipeGallery
    elements={getElements(5)}
    maxElement={3}
  />  
);

Props

Props Name Type Default Description
elements Array Element of gallery
maxElements Number 1 Max number of elements
onChangePosition Function Call when change the elements visibles
orientation String HORIZONTAL SwipeGallery.VERTICAL or SwipeGallery.HORIZONTAL
className String Custom name class
buffer Bool true if is true add a buffer for quickly transition
hideArrow Bool false If is true don't show the arrows
hideArrowWithNoElements Bool true If is true and maxElements > elements.length don't show the arrows
customStyles String Add inline styles to component
disableSwipe Bool false Disable swipe event
stopPropagation Bool false If is true, call a stopPropagation on touch events'
infinityGallery Bool true If is true the gallery is infinity
arrow Object { prev: '❮', next: '❯',} Change the arrow, you can send a string or a element
initialPosition Number 0 Initial position of gallery
position Number Change position of gallery

Readme

Keywords

none

Package Sidebar

Install

npm i react-swipe-gallery

Weekly Downloads

1

Version

0.6.3

License

MIT

Unpacked Size

24.9 kB

Total Files

9

Last publish

Collaborators

  • amadormateof