react-zoom-slider

Simple zoom slider image implemented in ReactJS

To run demo on your computer:

• Clone this repository
• npm install
• npm run dev

Screenshot

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 name	Prop type	Default value	Description
data	array	Required	data
width?	string	auto	set size for slider image
direction?	left, right	right	direction when show zoom image
showDescription?	boolean	true	show description of image

Author

• Tony Nguyen - nhattruong1811@gmail.com

License

MIT