xr-swiper

A React Component for swipeable views, includes useful components like pinchable images

Usage no npm install needed!

<script type="module">
  import xrSwiper from 'https://cdn.skypack.dev/xr-swiper';
</script>

README

  • xr-swiper

A React Component for swipeable views, includes useful components like pinchable images

** Install

+BEGIN_SRC shell

$ yarn add xr-swiper

+END_SRC

** Benefit

  • Simple: Based on [[hammerjs.github.io/][hammerjs]] and React, no other deps
  • Modern: Use flex, vw, vh, etc. to simpilify your work
  • Easy of use: You don't need to include many API and include multi CSS, just import this library, render it with React
  • Unrestrained: Unlike [[https://github.com/dimsemenov/PhotoSwipe][PhotoSwipe]], you don't need to specify image size, so it can be more widely use

** Use

*** Example

+BEGIN_SRC js

import React from 'react' import Swiper from 'xr-swiper'

class App extends React.Component { render() { return (

container 1
container 2
container 3
) } } #+END_SRC

*** Props

  • className: string - Root className, also className prefix for children, default to ReactSwiper
  • startIndex: number - Start slide index, default to 0
  • speed: number - Transition duration, default to 300ms
  • continuous: boolean - Create an infinite feel with no endpoints, default to true
  • disableTouch: boolean - If disable touch event like swipe & pinch, default to false
  • disabled: boolean - If totally disable swiper
  • onSwipeStart: Function - Fire when swipe start
  • onSwipeEnd - Fire when swipe end
  • onChange - Fire when swipe end and slide index change

*** CSS

Some simple CSS rules must attach to element.

Assume we set className to Swipe

+BEGIN_SRC css

.Swiper { overflow: hidden; }

.Swiper-ItemContainer { display: flex; }

.Swiper-Item { flex: 1; position: relative; }

+END_SRC

** License

MIT