Javascript 单击时滚动到特定幻灯片而不是上一张和下一张

我有4个按钮，我想把它们分配给每张幻灯片.有4张幻灯片.如果点击每个按钮，它应该滚动到分配给它的指定幻灯片，现在也是如此.我如何实现这一点？

import React, { useState, useRef } from "react";
import "./App.css";

const Slide = ({ slide, current, handleSlideClick }) => {
  const slideRef = useRef();

  let classNames = "slide";

  if (current === slide.index) classNames += " slide--current";
  else if (current - 1 === slide.index) classNames += " slide--previous";
  else if (current + 1 === slide.index) classNames += " slide--next";

  return (
    <li
      ref={slideRef}
      className={classNames}
      onClick={() => handleSlideClick(slide.index)}
    >
      <div className="slide__image-wrapper">
        <img className="slide__image" alt={slide.headline} src={slide.src} />
      </div>

      <article className="slide__content">
        <h2 className="slide__headline">{slide.headline}</h2>
        <button className="slide__action btn">{slide.button}</button>
      </article>
    </li>
  );
};

const Slider = ({ slides, heading }) => {
  const [current, setCurrent] = useState(0);

  const handlePreviousClick = () => {
    const previous = current - 1;
    setCurrent(previous < 0 ? slides.length - 1 : previous);
  };

  const handleNextClick = () => {
    const next = current + 1;
    setCurrent(next === slides.length ? 0 : next);
  };

  const handleSlideClick = (index) => {
    if (current !== index) {
      setCurrent(index);
    }
  };

  const wrapperTransform = {
    transform: `translateX(-${current * (100 / slides.length)}%)`
  };

  return (
    <div className="slider">
      <ul className="slider__wrapper" style={wrapperTransform}>
        {slides.map((slide) => (
          <Slide
            key={slide.index}
            slide={slide}
            current={current}
            handleSlideClick={handleSlideClick}
          />
        ))}
      </ul>

      <div className="slider__controls">
        <button onClick={handlePreviousClick}>1</button>
        <button onClick={handleNextClick}>2</button>
        <button onClick={handlePreviousClick}>3</button>
        <button onClick={handleNextClick}>4</button>
      </div>
    </div>
  );

return <Slider slides={slideData} />;
};

试着像这样简化Slider函数，但无济于事.

const Slider = ({ slides, slideRef }) => {
  const [current, setCurrent] = useState(0);

  const handleSlideChange = (swiper) => {
    setCurrent(swiper.realIndex);
  };

  const handleSlideClick = (index) => {
    if (slideRef.current) {
      slideRef.current.swiper.slideTo(index);
      setCurrent(index);
    }
  };

  const wrapperTransform = {
    transform: `translateX(-${current * (100 / slides.length)}%)`
  };