react-imageslides-more

在 react-imageslides 基础上添加了滑动切换图集 (自用)

Usage no npm install needed!

<script type="module">
  import reactImageslidesMore from 'https://cdn.skypack.dev/react-imageslides-more';
</script>

README

<<<<<<< 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

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