0.1.0 • Published 4 years ago

react-zoom-slider v0.1.0

Weekly downloads
46
License
MIT
Repository
-
Last release
4 years ago

react-zoom-slider

License: MIT

Simple zoom slider image implemented in ReactJS

To run demo on your computer:

  • Clone this repository
  • npm install
  • npm run dev

Screenshot

alt text

Usage

You can combine pivot and direction together

Slider Image
import SliderImage from 'react-zoom-slider';

const data = [
  {
    image: 'https://cdn.tgdd.vn/Products/Images/42/209800/oppo-reno2-f-xanh-1-org.jpg',
    text: 'img1'
  },
  {
    image: 'https://cdn.tgdd.vn/Products/Images/42/209800/oppo-reno2-f-xanh-4-org.jpg',
    text: 'img2'
  },
  {
    image: 'https://cdn.tgdd.vn/Products/Images/42/209800/oppo-reno2-f-xanh-10-org.jpg',
    text: 'img3'
  },
  ...
];


<SliderImage 
  data={data} 
  width="500px" 
  showDescription={true} 
  direction="right" 
/>
Props
Prop nameProp typeDefault valueDescription
dataarrayRequireddata
width?stringautoset size for slider image
direction?left, rightrightdirection when show zoom image
showDescription?booleantrueshow description of image

Author

  • Tony Nguyen - nhattruong1811@gmail.com

License

MIT