在敏锐滑块轮播上添加图像放大包

Question

我们正在尝试实现一个产品滑块轮播，当鼠标悬停在 Web 应用程序上时可以缩放。

想要利用

react-magnifier

和

keen-slider

包，以便我们可以在悬停时放大活动图像。

这是使用这两个包的模拟实现

import React from "react";
import { useKeenSlider } from "keen-slider/react";
import "keen-slider/keen-slider.min.css";
import "./styles.css";
import Magnifier from "react-magnifier";
function ThumbnailPlugin(mainRef) {
  return (slider) => {
    function removeActive() {
      slider.slides.forEach((slide) => {
        slide.classList.remove("active");
      });
    }
    function addActive(idx) {
      slider.slides[idx].classList.add("active");
    }

    function addClickEvents() {
      slider.slides.forEach((slide, idx) => {
        slide.addEventListener("click", () => {
          if (mainRef.current) mainRef.current.moveToIdx(idx);
        });
      });
    }

    slider.on("created", () => {
      if (!mainRef.current) return;
      addActive(slider.track.details.rel);
      addClickEvents();
      mainRef.current.on("animationStarted", (main) => {
        removeActive();
        const next = main.animator.targetIdx || 0;
        addActive(main.track.absToRel(next));
        slider.moveToIdx(Math.min(slider.track.details.maxIdx, next));
      });
    });
  };
}
function ExampleComponent({ activeImage }) {
  return <Magnifier src={activeImage} width={500} />;
}

export default function App() {
  const [sliderRef, instanceRef] = useKeenSlider({
    initial: 0
  });
  const [thumbnailRef] = useKeenSlider(
    {
      initial: 0,
      slides: {
        perView: 4,
        spacing: 10
      }
    },
    [ThumbnailPlugin(instanceRef)]
  );

  return (
    <>
      <ExampleComponent activeImage={sliderRef.initial} />
      <div ref={sliderRef} className="keen-slider">
        <div className="keen-slider__slide number-slide1">1</div>
        <div className="keen-slider__slide number-slide2">2</div>
        <div className="keen-slider__slide number-slide3">3</div>
        <div className="keen-slider__slide number-slide4">4</div>
        <div className="keen-slider__slide number-slide5">5</div>
        <div className="keen-slider__slide number-slide6">6</div>
      </div>

      <div ref={thumbnailRef} className="keen-slider thumbnail">
        <div className="keen-slider__slide number-slide1">1</div>
        <div className="keen-slider__slide number-slide2">2</div>
        <div className="keen-slider__slide number-slide3">3</div>
        <div className="keen-slider__slide number-slide4">4</div>
        <div className="keen-slider__slide number-slide5">5</div>
        <div className="keen-slider__slide number-slide6">6</div>
      </div>
    </>
  );
}

很想知道如何调试它以使其工作。

此外，是否有任何替代包允许我们使用这样的整个组件，而不必担心实现（zoom和carousel）

代码沙箱链接：https://codesandbox.io/s/keen-slider-react-magnifier-5sdrkl?file=/src/App.js

Answer 1

这会对你有帮助

import React from "react";
import ImageZoom from "react-medium-image-zoom";
import "react-medium-image-zoom/dist/styles.css";
import Slider from "react-slick";
import "slick-carousel/slick/slick.css";
import "slick-carousel/slick/slick-theme.css";

const settings = {
  dots: false,
  infinite: true,
  speed: 500,
  slidesToShow: 1,
  slidesToScroll: 1
};

interface ProductImage {
  src: string;
  alt: string;
}

interface ProductSliderProps {
  images: ProductImage[];
}

function ProductSlider({ images }: ProductSliderProps) {
  return (
    <Slider {...settings}>
      {images.map((image, index) => (
        <div key={index}>
          <ImageZoom src={image.src} alt={image.alt} />
        </div>
      ))}
    </Slider>
  );
}

export default ProductSlider;