HTMLify

<div class="wp-elementor-carousel-wrap">
  <div class="wp-elementor-carousel">
    <div class="wp-carousel-item">
      <img src="https://shineandglowevents.com/wp-content/uploads/2025/03/f525b152-b2c7-7340-6a3f-87a42dd2d73a_result-1024x683.webp" alt="Image 1">
      <h3>Timeless Moments</h3>
      <p>Photography preserves fleeting memories, turning them into lasting stories of love, emotion, and artistry.</p>
    </div>
    <div class="wp-carousel-item">
      <img src="https://shineandglowevents.com/wp-content/uploads/2025/03/amish-thakkar-BEdxXAiRfRM-unsplash_result-1536x1024.webp" alt="Image 2">
      <h3>Your Dream Wedding, Your Way</h3>
      <p>Share your vision, from themes and styles to personal touches that make your celebration uniquely yours.</p>
    </div>
    <div class="wp-carousel-item">
      <img src="https://shineandglowevents.com/wp-content/uploads/2025/03/anuj-kumar-QF-qYrnGhnY-unsplash-1_result-1024x683.webp" alt="Image 3">
      <h3>Decor Perfection</h3>
      <p>Design a stunning and cohesive ambiance with a detailed décor plan, including themes, color schemes, and layout ideas.</p>
    </div>
    <div class="wp-carousel-item">
      <img src="https://shineandglowevents.com/wp-content/uploads/2025/03/ginwestern-photography-vOwBpeIvFr8-unsplash_result-1024x683.webp" alt="Image 4">
      <h3>Your Dream Wedding, Your Way</h3>
      <p>Share your vision, from themes and styles to personal touches that make your celebration uniquely yours.</p>
    </div>
    <div class="wp-carousel-item">
      <img src="https://shineandglowevents.com/wp-content/uploads/2025/03/pexels-amolnandiwadekar-1707446_result-1024x682.webp" alt="Image 5">
      <h3>Timeless Moments</h3>
      <p>Photography preserves fleeting memories, turning them into lasting stories of love, emotion, and artistry.</p>
    </div>
  </div>
</div>

<style>
.wp-elementor-carousel-wrap {
  overflow: hidden;
  width: 100%;
  margin: 0 auto;
}

.wp-elementor-carousel {
  display: flex;
  gap: 20px;
  transition: transform 0.8s ease-in-out;
}

.wp-carousel-item {
  flex: 0 0 calc(33.333% - 20px);
  background: #f8f4ff;
  border: 1px solid #5243aa;
  padding: 15px;
  text-align: center;
  box-sizing: border-box;
}

.wp-carousel-item img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  margin: 0 auto 10px;
  display: block;
}

.wp-carousel-item h3 {
  font-weight: bold;
  margin: 10px 0 5px;
}

.wp-carousel-item p {
  font-size: 14px;
  color: #333;
  line-height: 1.5;
}

/* Responsive */
@media (max-width: 768px) {
  .wp-carousel-item {
    flex: 0 0 calc(50% - 20px);
  }
}

@media (max-width: 480px) {
  .wp-carousel-item {
    flex: 0 0 100%;
  }
}
</style>

<script>
document.addEventListener("DOMContentLoaded", function () {
  const carousel = document.querySelector('.wp-elementor-carousel');
  const items = document.querySelectorAll('.wp-carousel-item');
  let index = 0;
  const visibleItems = 3; // ek bar me dikhne wale items

  setInterval(() => {
    index++;
    if (index > items.length - visibleItems) {
      index = 0; // reset to start
    }
    const shift = index * (items[0].offsetWidth + 20); // +20 gap ke liye
    carousel.style.transform = `translateX(-${shift}px)`;
  }, 4000); // har 4 sec baad slide hoga
});
</script>