Custom Image Slider

<div class="product-slider-wrapper">
   <t2 class="slider-heading">Get the best deals</t2>
   <div class="product-slider" id="productSlider"></div>
</div>

/* Main wrapper with dynamic background */
.product-slider-wrapper {
 padding-top: 24px;
 padding-left: 16px;
 overflow: hidden;
 /* Smooth background change */
}
/* Scrollable slider row */
.product-slider {
 display: flex;
 gap: 16px;
 overflow-x: auto;
 scroll-snap-type: x mandatory;
 scroll-padding-left: 16px;
 padding: 12px 16px 24px 0;
 scrollbar-width: none;
 /* Firefox */
 -ms-overflow-style: none;
 /* IE */
}
.product-slider::-webkit-scrollbar {
 display: none;
 /* Chrome, Safari */
}
/* Individual product card */
.product-card {
 flex: 0 0 82%;
 aspect-ratio: 1 / 1;
 scroll-snap-align: start;
 background-size: cover;
 background-position: center;
 background-repeat: no-repeat;
 position: relative;
 overflow: hidden;
 border-radius: 20px;
 cursor: pointer;
}
.card-title{
 color:white;
}
/* Gradient overlay + info */
.card-overlay {
 position: absolute;
 bottom: 0;
 left: 0;
 width: 100%;
 padding: 16px;
 box-sizing: border-box;
 background: linear-gradient(to top, rgba(0, 0, 0, 0.4), transparent);
}
.info{
 display: flex;
 flex-direction: column;
}
.shop-now-btn {
 border-color: white;
 color: white;
 margin-top: 8px;
 padding: 6px 12px;
 font-size: 14px;
 width: 120px;
}

// 👉 Sample data to render cards - each with image, collectionId, and gradient
const data = [
 {
   collectionId: "445538173178",
   name: "Summer Sale",
   image: "https://res.cloudinary.com/dixyq8hvr/image/upload/v1747662091/summer_wgkthi.png",
   bgGradient: "rgba(212, 153, 113, 0.2)"
 },
 {
   collectionId: "445725901050",
   name: "Winter Sale",
   image: "https://res.cloudinary.com/dixyq8hvr/image/upload/v1747662091/winter_ngg6at.png",
   bgGradient: "rgba(21, 108, 127, 0.2)"
 },
 {
   collectionId: "448780894458",
   name: "Spring Sale",
   image: "https://res.cloudinary.com/dixyq8hvr/image/upload/v1747662091/spring_tafetf.png",
   bgGradient: "rgba(187, 90, 171, 0.2)"
 }
];
// 🎯 Get DOM references
const slider = document.getElementById("productSlider");
const wrapper = document.querySelector(".product-slider-wrapper");
// 🔁 Render each product card with SDK-connected button
data.forEach((item) => {
 const card = document.createElement("div");
 card.className = "product-card";
 card.style.backgroundImage = `url(${item.image})`;
 card.innerHTML = `
   <div class="card-overlay">
     <div class="info">
       <t4 class="card-title">${item.name}</t4>
       <outlined-button class="shop-now-btn">Shop Now</outlined-button>
     </div>
   </div>
 `;
 // 👉 Bind VajroSDK action to open the relevant collection
 card.querySelector(".shop-now-btn").addEventListener("click", async (e) => {
   e.stopPropagation(); // Prevent parent click if needed
   try {
     await VajroSDK.actions.openCollection({ collectionId: item.collectionId });
     console.log("✅ Opened collection:", item.collectionId);
   } catch (err) {
     console.error("❌ Failed to open collection:", err);
   }
 });
 slider.appendChild(card);
});
// 🌀 Update background gradient based on scroll position
slider.addEventListener("scroll", () => {
 const cards = document.querySelectorAll(".product-card");
 const scrollLeft = slider.scrollLeft;
 const cardWidth = cards[0]?.offsetWidth + 16; // 16px = gap
 const activeIndex = Math.round(scrollLeft / cardWidth);
 const activeData = data[activeIndex];
 if (activeData) {
   wrapper.style.background = activeData.bgGradient;
 }
});
// 🎨 Set default gradient on load
wrapper.style.background = data[0].bgGradient;