0.3.6 • Published 5 years ago

react-imageslides-more v0.3.6

Weekly downloads
14
License
MIT
Repository
-
Last release
5 years ago

<<<<<<< HEAD

React Image Slides

codecov

A mobile friendly images slideshow react component

Example

demo1 demo2

Edit l2xpwy3xrq

Features

  • native swiping experience(use Alloyfinger)
  • double tap to zoom in/out
  • preloads Images
  • no unnecessary rendering(renders no more than 3 images at a time)

Get Started

  1. Run yarn add react-imageslides react react-dom alloyfinger The package has peer dependencies on react@^16.0.0, react-dom@16.0.0, and alloyfinger.

  2. Render it!

import React from 'react';
import ReactDOM from 'react-dom';
import ImageSlides from 'react-imageslides';
const images = [
  'http://img.zcool.cn/community/0101f856cfff206ac7252ce6214470.jpg',
  'http://a4.att.hudong.com/05/55/01200000033533115855502090905.jpg',
  'http://img.zcool.cn/community/0101f856cfff206ac7252ce6214470.jpg',
  'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1503235534249&di=4c198d5a305627d12e5dae4c581c9e57&imgtype=0&src=http%3A%2F%2Fimg2.niutuku.com%2Fdesk%2Fanime%2F0529%2F0529-17277.jpg',
];
ReactDOM.render(
  <ImageSlides images={images} isOpen />,
  document.getElementById('root'),
);

Apis

PropertyTypeDefaultRequiredDescription
imagesarrayyesimage urls to display
isOpenbooleanfalsewhether component is open
indexnumber0index of the first image to display
addonfuncdisplay extra infomation of the image (addon must return a react element)
useTouchEmulatorbooleanfalseuse touch emulator
onClosefuncclose window event
onChangefuncswipe image event

Todo

  • Add tests
  • Add pop-up animation effects
  • support pinch

react-imageslides-more

react

e817afc9c562a3548673411afc0c517665646ce8

0.3.6

5 years ago

0.3.5

5 years ago

0.3.4

5 years ago

0.3.3

5 years ago

0.3.2

5 years ago

0.3.0

5 years ago

0.2.0

5 years ago

0.1.5

5 years ago

0.1.4

5 years ago

0.1.3

5 years ago

0.1.2

5 years ago

0.1.1

5 years ago

0.1.0

5 years ago