reactjs - React slick with custom scrollbar navigation

Question

I am trying to build custom scrollbar navigation for the react-slick carousel item. React-slick already provides dot navigation but that is not what I am looking for. I want to build something like what amazon has on their homepage for showcasing products. Can someone please help me with the logic for building and binding it to the carousel item.

Amazon Slider Amazon Slider

For Reference: Slider I am building

I am currently trying to do it with react-slick but if there is any other library that can do it better then I will gladly do so.

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;

question from:https://stackoverflow.com/questions/65897916/react-slick-with-custom-scrollbar-navigation

Answer 1

Waitting for answers