react-zoom-slider's Introduction

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

License

MIT

react-zoom-slider's People

Stargazers

Watchers

react-zoom-slider's Issues

CSS issue

{
margin: 0;
padding: 0;
box-sizing: border-box;

}
make it like this
.reactSlider * {
margin: 0;
padding: 0;
box-sizing: border-box;

}
with this it is effecting globally and effecting my app. if you write for your application level like .reactslide *{} that would be better .
in my app we not used box-sizing and your css plugin files not able to over ride and loading last.

could you please write like that would be help ful for other users also

how to solve peer rollup dependency issues???

npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: [email protected]
npm ERR! Found: [email protected]
npm ERR! node_modules/rollup
npm ERR! dev rollup@"^1.27.11" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer rollup@"^2.33.1" from [email protected]
npm ERR! node_modules/rollup-plugin-dts
npm ERR! dev rollup-plugin-dts@"^1.3.0" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.

state change with data image whacks the xy cursor of the zoom, also the prev, next button does not work

when i tried to make a state change to the data image, bec the image data is mostly coming from a backend call, the xy cursor of the zoom function has become not aligned with the image, also the prev, next button will not work

pls find code below added to SliderImage.examples.md :

import {useState, useEffect} from 'react';
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'
}, {
  image: 'https://cdn.tgdd.vn/Products/Images/42/210653/iphone-11-pro-max-256gb-mau-bac-1-org.jpg',
  text: 'img4'
}, {
  image: 'https://cdn.tgdd.vn/Products/Images/42/210653/iphone-11-pro-max-256gb-mau-bac-6-org.jpg',
  text: 'img5'
}, {
  image: 'https://cdn.tgdd.vn/Products/Images/42/221926/huawei-y6p-xanh-1-org.jpg',
  text: 'img6'
}, {
  image: 'https://cdn.tgdd.vn/Products/Images/42/221926/huawei-y6p-xanh-10-org.jpg',
  text: 'img7'
}, {
  image: 'https://cdn.tgdd.vn/Products/Images/42/221926/huawei-y6p-xanh-12-org.jpg',
  text: 'img8'
}, ];

function Test(props){
  const [myData, setData] = useState([{image: ''}])
  
  useEffect(() => {
    setData(data.map(el => ({image: el.image, })))
  }, [])
  
  return (
    <SliderImage data={myData} width="500px" showDescription={true} direction="right" />
  )
}

<Test />

jslancerteam / react-zoom-slider Goto Github PK