<<<<<<< HEAD

React Image Slides

A mobile friendly images slideshow react component

Example

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, [email protected], 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

| Property | Type | Default | Required | Description | | :--------------- | :-----: | :-----: | :------: | :------------------------------------------------------------------------ | | images | array | | yes | image urls to display | | isOpen | boolean | false | | whether component is open | | index | number | 0 | | index of the first image to display | | addon | func | | | display extra infomation of the image (addon must return a react element) | | useTouchEmulator | boolean | false | | use touch emulator | | onClose | func | | | close window event | | onChange | func | | | swipe image event |

Todo

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

react-imageslides-more

react

e817afc9c562a3548673411afc0c517665646ce8