javascript - 如何在底部显示带有幻灯片名称的轮播图像？

Question

我一直在尝试开发一个 react "carousel" 或 "Slider"，它显示每张图片的名称，如下所示 带有图片的组件，箭头键，以及我使用 Keen-slider 构建的图片的名称这个，但我没有找到任何运气。这是源代码。

const BoxImage = ({ Images, Alt }) => {
  const [details, setDetails] = React.useState(null);
  const [currentSlide, setCurrentSlide] = React.useState(0);
  const [pause, setPause] = React.useState(false);
  const timer = React.useRef();

  const [sliderRef, slider] = useKeenSlider({
    slidesPerView: 1,
    mode: "snap",
    loop: false,
    centered: true,
    duration: 2000,
    initial: 0,
    move(s) {
      setDetails(s.details());
    },
    slideChanged(s) {
      setCurrentSlide(s.details().relativeSlide);
    },
  });

  const [gliderRef, glider] = useKeenSlider({
    slidesPerView: 1,
    mode: "snap",
    loop: false,
    centered: true,
    duration: 2000,
    initial: 0,
    slideChanged(s) {
      setCurrentSlide(s.details().relativeSlide);
    },
  });

  function positionStyle(idx) {
    if (!details) return {};
    const position = details.positions[idx];
    const x = details.widthOrHeight * position.distance;
    const scale_size = 1;
    const scale = 1;
    return {
      transform: `translate3d(${x}px, 0px, 0px) scale(${scale})`,
      WebkitTransform: `translate3d(${x}px, 0px, 0px) scale(${scale})`,
    };
  }

  return (
    <>
      <div></div>
      <div
        style={{
          width: "100%",
          height: "350px",
          backgroundColor: "transparent ",
        }}
      >
        <div
          ref={sliderRef}
          className="keen-slider zoom-out"
          style={{ background: "transparent", backgroundColor: "transparent" }}
        >
          {Images.map((src, idx) => (
            <div
              key={idx}
              className="keen-slider__slide zoom-out__slide"
              style={{
                display: "flex",
                alignItems: "center",
                justifyContent: "center",
                background: "transparent",
                backgroundColor: "transparent",
                width: "550px",
              }}
            >
              <img
                style={{ background: "transparent" }}
                src={src}
                alt="Mountains"
                layout="intrinsic"
                width={350}
                height={350}
              />
            </div>
          ))}
        </div>
      </div>

      <div
        style={{
          display: "flex",
          width: "100%",
          height: "60px",
          background: "transparent",
          background: "rgba(255, 255, 255, 0.4)",
          justifyContent: "space-evenly",
          alignItems: "center",
        }}
      >
        <ArrowLeft
          onClick={(e) => e.stopPropagation() || (slider.prev() && glider.prev)}
        />
        <div
          style={{
            width: "300px",
            minWidth: "250px",
            maxWidth: "300px",
            display: "flex",
            alignContent: "center",
            alignItems: "center",
            justifyContent: "center",
            backgroundColor: "transparent",
          }}
        >
          <div
            ref={gliderRef}
            className="keen-slider navigation-wrapper"
            style={{
              background: "transparent",
              backgroundColor: "transparent",
            }}
          >
            <div
              className="keen-slider__slide"
              style={{ backgroundColor: "transparent", textAlign: "center" }}
            >
              <h5
                style={{
                  backgroundColor: "transparent",
                  textAlign: "center",
                }}
              >
                {Alt}
              </h5>
            </div>
          </div>
        </div>
        <ArrowRight
          onClick={(e) =>
            e.stopPropagation() || (slider.next() && glider.next())
          }
        />
      </div>
    </>
  );
};

我在其中发送图像数组和图像的 alt 测试，作为组件的道具。有什么方法可以连接这两个滑块，所以当一个移动到下一个时，另一个也移动，或者如果想从头开始构建一个新组件，我可以用React-use-gesture做到这一点，还是我真的知道它叫什么？带有标签的轮播，还是带有文本的滑块？

资源：KeenSlider

标签： javascriptreactjs