ghost-slider

<div id="ghost-slider">
  <style>
    #ghost-slider {
      font-family: Arial, sans-serif;
      background-color: #f9f9f9;
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
      margin: 0;
    }

    .ghost-slider-container {
      position: relative;
      width: 80%;
      max-width: 1200px;
      overflow: hidden;
    }

    .ghost-slider {
      display: flex;
      transition: transform 0.3s ease-in-out;
    }

    .ghost-box {
      min-width: 100%;
      padding: 20px;
      box-sizing: border-box;
      background: #fff;
      margin: 10px;
      border-radius: 10px;
      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
      text-align: left;
    }

    .ghost-box h3 {
      margin-bottom: 10px;
    }

    .ghost-box ul {
      list-style-type: none;
      padding: 0;
    }

    .ghost-box li {
      margin-bottom: 8px;
    }

    .ghost-e-commerce {
      background-color: #e0f4ff;
    }

    .ghost-banking-finance {
      background-color: #d9fbee;
    }

    .ghost-restaurants {
      background-color: #fff4d1;
    }

    .ghost-navigation {
      position: absolute;
      top: 50%;
      width: 100%;
      display: flex;
      justify-content: space-between;
      transform: translateY(-50%);
    }

    .ghost-navigation button {
      background: #fff;
      border: none;
      padding: 10px 20px;
      cursor: pointer;
      font-size: 18px;
      box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
      border-radius: 5px;
    }

    .ghost-navigation button:hover {
      background: #f0f0f0;
    }
  </style>
  <div class="ghost-slider-container">
    <div class="ghost-slider">
      <div class="ghost-box ghost-e-commerce">
        <h3>E-commerce</h3>
        <ul>
          <li>Accept Native Payments on WhatsApp</li>
          <li>Create Conversational Flows that Convert</li>
          <li>Set up automated checkout workflows</li>
          <li>Categorize products into Collections</li>
        </ul>
      </div>
      <div class="ghost-box ghost-banking-finance">
        <h3>Banking & Finance</h3>
        <ul>
          <li>Carry out KYC processes like ID verification</li>
          <li>Respond to customer queries 24×7</li>
          <li>Showcase your offerings with WhatsApp storefront</li>
        </ul>
      </div>
      <div class="ghost-box ghost-restaurants">
        <h3>Restaurants & Food Businesses</h3>
        <ul>
          <li>Promote your food menu with WhatsApp Catalogs</li>
          <li>Take food orders & payments on WhatsApp</li>
          <li>Offer 24×7 customer support</li>
        </ul>
      </div>
    </div>
    <div class="ghost-navigation">
      <button id="ghost-prev">←</button>
      <button id="ghost-next">→</button>
    </div>
  </div>
  <script>
    (function () {
      const slider = document.querySelector('#ghost-slider .ghost-slider');
      const boxes = document.querySelectorAll('#ghost-slider .ghost-box');
      const prevButton = document.getElementById('ghost-prev');
      const nextButton = document.getElementById('ghost-next');

      let currentIndex = 0;

      function updateSliderPosition() {
        slider.style.transform = `translateX(-${currentIndex * 100}%)`;
      }

      prevButton.addEventListener('click', () => {
        currentIndex = currentIndex > 0 ? currentIndex - 1 : boxes.length - 1;
        updateSliderPosition();
      });

      nextButton.addEventListener('click', () => {
        currentIndex = currentIndex < boxes.length - 1 ? currentIndex + 1 : 0;
        updateSliderPosition();
      });
    })();
  </script>
</div>