Create a carousel with 4 visible slides and autoplay

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Splide Carousel Example</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <!-- Splide CSS -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@splidejs/splide@4.1.4/dist/css/splide.min.css">

  <style>
    body {
      font-family: Arial, sans-serif;
      padding: 50px;
      background: #f7f7f7;
    }

    #splide01 {
      max-width: 1200px;
      margin: auto;
    }

    .splide__slide img {
      width: 100%;
      height: auto;
      display: block;
      border-radius: 10px;
      border: 3px solid #ccc;
    }
  </style>
</head>
<body>

  <h2 style="text-align:center;">Splide Carousel – 4 Visible, Autoplay</h2>

  <div id="splide01" class="splide">
    <div class="splide__track">
      <ul class="splide__list">
        <li class="splide__slide"><img src="https://picsum.photos/id/1011/300/200" alt="Image 1"></li>
        <li class="splide__slide"><img src="https://picsum.photos/id/1015/300/200" alt="Image 2"></li>
        <li class="splide__slide"><img src="https://picsum.photos/id/1016/300/200" alt="Image 3"></li>
        <li class="splide__slide"><img src="https://picsum.photos/id/1020/300/200" alt="Image 4"></li>
        <li class="splide__slide"><img src="https://picsum.photos/id/1024/300/200" alt="Image 5"></li>
        <li class="splide__slide"><img src="https://picsum.photos/id/1027/300/200" alt="Image 6"></li>
        <li class="splide__slide"><img src="https://picsum.photos/id/1033/300/200" alt="Image 7"></li>
        <li class="splide__slide"><img src="https://picsum.photos/id/1035/300/200" alt="Image 8"></li>
      </ul>
    </div>
  </div>

  <!-- Splide JS -->
  <script src="https://cdn.jsdelivr.net/npm/@splidejs/splide@4.1.4/dist/js/splide.min.js"></script>

  <script>
    document.addEventListener('DOMContentLoaded', function () {
      new Splide('#splide01', {
       ...

CSS

.splide__slide.is-visible:nth-child(2n+1) img {
                transform: rotate(15deg);
                transition: .5s ease-in-out;
}

.splide__slide.is-visible:nth-child(2n) img{
                transform: rotate(-15deg);
                transition: .5s ease-in-out;
}