使用自定义滚动条导航来响应光滑

如何解决使用自定义滚动条导航来响应光滑

我正在尝试为 react-slick carousel 项目构建自定义滚动条导航。 React-slick 已经提供了点导航，但这不是我想要的。我想建立一些类似于亚马逊主页上展示产品的东西。有人可以帮助我构建并将其绑定到轮播项目的逻辑。

亚马逊滑块 Amazon Slider

供参考： Slider I am building

我目前正在尝试使用 react-slick 来做这件事，但如果有任何其他库可以做得更好，那么我很乐意这样做。

import React from "react";
import Carousel,{ Settings } from "react-slick";
import "slick-carousel/slick/slick.css";
const VariatedCarousel = () => {
  const settings: Settings = {
    infinite: false,slidesToScroll: 3,slidesToShow: 3,};

  return (
    <div className="container">
      <Carousel {...settings} className="first">
        <div className="item">1</div>
        <div className="item">2</div>
        <div className="item">3</div>
        <div className="item">4</div>
        <div className="item">5</div>
      </Carousel>
      <div className="scroller">
          <span className="thumb"></span>
      </div>
    </div>
  );
};

export default VariatedCarousel;