JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@splidejs/[email protected]/dist/css/splide.min.css">
  <style>
    .splide__track {
      overflow: visible;
    }
  </style>
</head>
<body>
  <section class="dummy"><div class="container"></div></section>
  <section class="main">
    <div class="container">
      <div class="slider splide">
        <div class="splide__track">
          <div class="splide__list">
            <div class="splide__slide">1</div>
            <div class="splide__slide">2</div>
            <div class="splide__slide">3</div>
            <div class="splide__slide">4</div>
            <div class="splide__slide">5</div>
          </div>
        </div>
      </div>
    </div>
  </section>
  <section class="dummy"><div class="container"></div></section>
  <script src="https://cdn.jsdelivr.net/npm/@splidejs/[email protected]/dist/js/splide.min.js"></script>
</body>
</html>

CSS

* {
  margin: 0;
  padding: 0;
}
section {
  overflow: hidden;
}
.dummy {
  height: 50vh;
  background-color: burlywood;
}
.main {
  background-color: white;
}
.container {
  width: 80%;
  margin: 0 auto;
  border-left: 1px dashed gray;
  border-right: 1px dashed gray;
  height: 100%;
  padding: 5rem 0;
}
.splide__slide {
  width: 20rem;
  aspect-ratio: 3 / 2;
  background-color: lightslategray;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 2rem;
}

JavaScript

const splide = document.querySelector('.slider');

const interval = 5000; // The autoplay interval duration in milliseconds 
const speed = 1000; // Slider transition speed in ms
const dragMinThreshold = { // Minimum distance in pixels to start dragging
  mouse: 0,
  touch: 10,
};
const flickPower = 500; // Determine the power of "flick". The larger number this is, the farther the carousel runs.
const wheelMinThreshold = 20; // The threshold to cut off the small delta produced by inertia scroll.
const wheelSleep = 500; // The sleep duration in milliseconds until accepting next wheel.

const splideInstance = new Splide(splide, {
  autoWidth: true,
  arrows: false,
  pagination: false,
  updateOnMove: true,
  autoplay: false,
  interval,
  perPage: 1,
  type: 'loop',
  gap: '1rem',
  drag: true,
  dragMinThreshold,
  flickMaxPages: 1,
  flickPower,
  speed,
  snap: false,
  wheelMinThreshold,
  wheelSleep,
});

let lastTime = 0
function onWheel(e) {
  if (e.cancelable) {
    const { deltaX } = e;
    const backwards = deltaX < 0;
    const timeStamp = e.timeStamp;
    const min = splideInstance.options.wheelMinThreshold || 20;
    const sleep = splideInstance.options.wheelSleep || 300;

    if (Math.abs(deltaX) > min && timeStamp - lastTime > sleep) {
      splideInstance.go(backwards ? '<' : '>');
      lastTime = timeStamp;
    }
  }
}

splide.addEventListener('wheel', onWheel);

splideInstance.mount();