如何为 [react-slick] 添加支持触摸的灯箱功能？

Question

在构建使用 jQuery 插件提供大部分功能的网站后，我最近转向了 React。要创建图像滑块 + 灯箱，我曾经组合 slick.js with halkaBox.js or SimpleLightbox（这很容易）。

现在我正在使用 React，我发现 react-slick to be a great slider component, but I'm not sure how best to add touch-enabled lightbox functionality to it. Is there a touch-enabled React lightbox component that pairs well with react-slick? Is there a proper way incorporate a JS plugin like halkaBox.js 有像 react-slick 这样的 React 组件？

任何指导将不胜感激！

Answer 1

我想，你可以使用react-slick + react-image-lightbox。本地状态是保存当前图片路径的好地方；

import Slider from 'react-slick';
import Lightbox from 'react-image-lightbox';

class Slider extends React.Component{
  constructor(props){
    super(props);

    this.state = {
      images: ['src/image1.png', 'src/image2.png', 'src/image3.png'],
      current: ''
    }
  }

  getSliderSettings(){
   return {
      dots: true,
      infinite: true,
      speed: 500,
      slidesToShow: 1,
      slidesToScroll: 1
   }
  }

  handleClickImage = (e, image) => {
   e && e.preventDefault();

   this.setState({
     current: image
   })
  }

  handleCloseModal = (e) => {
   e && e.preventDefault();

   this.setState({
     current: ''
   })
  }

  render(){
   const settings = this.getSliderSettings();
   const { images, current } = this.state;

   return (
     <div>
      <Slider {...settings}>
        { images.map(image => (
           <img src={image} onClick={ e => this.handleClickImage(e, image)}  />

        ))} 
      </Slider>

      {current &&
         <Lightbox
            mainSrc={current}
            onCloseRequest={this.handleCloseModal}
            />
      }
    </div>
   )
  }
}

如何为 [react-slick] 添加支持触摸的灯箱功能？

How to add touch-enabled lightbox features to [react-slick]?

reactjs

react-slick