Splide Scroll V3

HTML

<!-- Splide v3.6.12 CSS -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@splidejs/[email protected]/dist/css/splide.min.css">

<section style="height: 200px"></section>

  <!-- Carrossel -->
  <section class="splide" id="carrossel">
    <div class="splide__track">
      <ul class="splide__list">
        <li class="splide__slide">Slide 1</li>
        <li class="splide__slide">Slide 2</li>
        <li class="splide__slide">Slide 3</li>
        <li class="splide__slide">Slide 4</li>
        <li class="splide__slide">Slide 5</li>
      </ul>
    </div>
  </section>

  <section style="height: 800px"></section>

  <!-- Splide v3.6.12 JS -->
  <script src="https://cdn.jsdelivr.net/npm/@splidejs/[email protected]/dist/js/splide.min.js"></script>

CSS

body {
      font-family: Arial, sans-serif;
      margin: 0;
      padding: 0;
      overflow-x: hidden;
    }

    .splide {
      max-width: 90%;
      margin: auto;
    }

    .splide__slide {
      background: #007bff;
      color: white;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1.5rem;
      height: 200px;
      border-radius: 10px;
    }

JavaScript

document.addEventListener('DOMContentLoaded', function () {
      var splide = new Splide('#carrossel', {
        type: 'loop',
        perPage: 3,
        perMove: 1,
        gap: '20px',
        arrows: true,
        breakpoints: {
          1024: { perPage: 2 },
          768: { perPage: 1 }
        },
        dragMinThreshold: { touch: 30 },
        waitForTransition: false,
      });

      splide.mount();
    });