如何在 React 中循环拖动可拖动滑块答案

【问题标题】：How to loop a Draggable slider in React如何在 React 中循环拖动可拖动滑块
【发布时间】：2021-08-04 08:45:28
【问题描述】：

我当前的项目中有一个可拖动的水平滑块，我想将其设置为连续循环。通过连续循环我的意思是它应该在拖动时响应一个又一个显示图像的过程？现在，我的滑块中只有 3 张图像，当我将滑块向左拖动时，滑块及其第 3 张图像和空白区域随即开始显示。在这一点上，我希望图像从头开始连续重新开始，即从第一张图像开始，旨在覆盖白色空白区域。

另外，我在现有代码中遇到的一个错误是，当我开始将滑块拖到右侧时，浏览器上突然出现一个滚动条，并且一直处于永无止境的状态。永无止境的状态是指当我将所有 3 张图像完全朝正确的方向拖动时，它仍然保留在屏幕上。

所以这是我想要在当前项目中应用和解决的两件事。我在下面分享我的代码。

src > Routes > Home > Components > Carousel > Components > SliderDataItems > index.js

import React, { useRef, useEffect } from "react";
import { gsap } from "gsap";
import { Draggable } from "gsap/Draggable";
import { ZoomInOutlined } from '@ant-design/icons'
import { Images } from '../../../../../../Shared/Assets';
import ImagesIcon from '../../../../../../Components/Cells/ImagesIcon'
gsap.registerPlugin(Draggable);

const pictures = [
  {
    img: Images.xgallery1,
    icon: <ZoomInOutlined />
  },
  {
    img: Images.xgallery2,
    icon: <ZoomInOutlined />
  },
  {
    img: Images.xgallery4,
    icon: <ZoomInOutlined />
  },
];

const Slide = ({ img, icon }) => {
  return (
    <div className="slide">
      <div className="image">
        <ImagesIcon src={img} />
        <div className="icon">
          {icon}
        </div>
      </div>
    </div>
  );
};

export const Slider = () => {
  const sliderRef = useRef(null);

  useEffect(() => {
    Draggable.create(sliderRef.current, {
      type: "x"

    });
  }, []);

  return (
    <div className="slider" ref={sliderRef}>
      {pictures.map((item, index) => {
        return (
          <Slide key={index} img={item.img} icon={item.icon} />
        );
      })}
    </div>
  );
};
export default Slider;

src > Routes > Home > Components > Carousel > style.scss

.slider {
  display: flex;
  cursor: unset !important;
  overflow: hidden !important;
  .slide {
    .image {
      position: relative;
      img {
        width: 100% !important;
        height: auto !important;
        object-fit: cover;
      }
      .icon {
        transition: 0.5s ease;
        opacity: 0;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
        text-align: center;
        span {
          svg {
            font-size: 30px;
            color: #fff;
          }
        }
      }
    }
  }
  .image:hover .icon {
    opacity: 1;
  }
}
.image:after {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: rgba(211, 208, 208, 0.6);
  opacity: 0;
  transition: all 0.5s;
  -webkit-transition: all 0.5s;
}
.image:hover:after {
  opacity: 1;
}

这是 demo 的链接（请参见页脚部分上方）供您参考。

感谢您的帮助。

【问题讨论】：

标签： reactjs sass slider carousel draggable

【解决方案1】：

对于 draggle Slider 有一个非常轻量级的 JS Carousel 包 - siema 这是一个用 JS 制作的伟大的、轻量级的轮播。在此基础上还构建了其他纯粹为 React 制作的包。

在你的情况下，我愿意尝试 react-siema。

有了它，你可以像这样简单地使用轮播，默认情况下它是可拖动的。另外，无需加载任何 css。

【讨论】：