Reports

Recently i used the splideJS for one of my NextJs projects and faced the same issue (ChatGPT was also not that helpful)

They have a separate react-splide package but it did not work for me
These are my exact steps

Install both splide and auto scroll extension

npm install @splidejs/splide @splidejs/splide-extension-auto-scroll

Import the splice to the component
(Without the css the slides would not appear)

import { Splide } from '@splidejs/splide';
import { AutoScroll } from '@splidejs/splide-extension-auto-scroll';
import '@splidejs/splide/css';

Mount the splide code in useEffect

  useEffect(() => {

    const splide = new Splide('.splide', {
      type: 'loop',
      drag: 'free',
      focus: 'center',
      perPage: 3,
      arrows: true,
      pagination:true,
      autoScroll: {
        speed: 1,
        pauseOnHover: true,
        pauseOnFocus: true,
        rewind: true,
      },
    });

    splide.mount({ AutoScroll });

    return () => {
      splide.destroy();
    };
  }, []);

Finally add the splide items to the component

    <div className="splide">
      <div className="splide__track">
        <ul className="splide__list">

          <li className="splide__slide">
            <img src="1.jpg" alt="Image 1" />
          </li>
          <li className="splide__slide">
            <img src="2.jpg" alt="Image 1" />
          </li>
          <li className="splide__slide">
            <img src="4.jpg" alt="Image 1" />
          </li>
          <li className="splide__slide">
            <img src="1.jpg" alt="Image 1" />
          </li>
        </ul>
      </div>
    </div>

As i noticed class names and element structure should be as it is.
Feel free to correct me if I am wrong

Thanks

79781228