sync-react-splide.tsx

import React from 'react';
import Container from '@/components/container';
import ArrowRight from '@/assets/arrow-right.svg';
import { Splide, SplideSlide } from '@splidejs/react-splide';
import '@splidejs/splide/dist/css/splide.min.css';

const SyncedSlider = () => {
  const firstSlideRef = React.useRef(null);
  const secondSlideRef = React.useRef(null);

  React.useEffect(() => {
    if (firstSlideRef.current) {
      firstSlideRef.current.sync(secondSlideRef.current.splide);
    }
  }, [firstSlideRef, secondSlideRef]);

  const sliderOptions = {
    rewind: true,
    arrows: false,
    autoplay: true,
    pauseOnHover: true,
    loop: true,
    interval: 3000,
    speed: 600,
    classes: {
      pagination: 'splide__pagination opacity-0',
    },
  };

  return (
      <div>
        <Container>
          <div className="flex justify-center mx-auto -translate-y-1/2">
            <Splide
              ref={(slider) => (firstSlideRef.current = slider)}
              options={sliderOptions}
              className="border border-black"
            >
              <SplideSlide>
                <div className="bg-red-400  h-[380px] shrink-0 w-[500px]"></div>
              </SplideSlide>
              <SplideSlide>
                <div className="bg-yellow-400  h-[380px] shrink-0 w-full max-w-[500px]"></div>
              </SplideSlide>
              <SplideSlide>
                <div className="bg-green-400  h-[380px] shrink-0 w-full max-w-[500px]"></div>
              </SplideSlide>
            </Splide>

            <div className="flex relative w-full max-w-[500px] overflow-hidden -translate-y-[60px] -translate-x-[60px]">
              <div className="absolute z-50 flex gap-5 p-5 bottom-3 right-5">
                <button className="bg-[#5A0F39] rotate-180 rounded-full p-4 w-12 h-12 items-center justify-center flex  text-white border-2 border-[#CE9328]">
                  <div>
                    <ArrowRight />
                  </div>
                </button>

                <button className="bg-[#5A0F39]  rounded-full p-4 w-12 h-12 items-center justify-center flex  text-white border-2 border-[#CE9328]">
                  <div>
                    <ArrowRight />
                  </div>
                </button>
              </div>

              <Splide
                ref={(slider) => (secondSlideRef.current = slider)}
                options={sliderOptions}
                className="border border-black"
              >
                <SplideSlide>
                  <div className="bg-red-400  h-[380px] shrink-0 w-[500px]"></div>
                </SplideSlide>
                <SplideSlide>
                  <div className="bg-yellow-400  h-[380px] shrink-0 w-full max-w-[500px]"></div>
                </SplideSlide>
                <SplideSlide>
                  <div className="bg-green-400  h-[380px] shrink-0 w-full max-w-[500px]"></div>
                </SplideSlide>
              </Splide>
            </div>
          </div>
        </Container>
      </div>
  );
};

export default SyncedSlider;