Dashboard Temp Share Shortlinks Frames API

HTMLify

Image Carousel
Views: 181 | Author: djdj 
  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
<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>

Share this file: