$(window).on('load', function() { function initProductSliders() { $(".product-slider").each(function() { const $slider = $(this); const $container = $slider.find(".slider-container"); const $items = $container.find(".product-item"); if ($items.length === 0) return; const itemWidth = $items.first().outerWidth(true); const sliderWidth = $slider.width(); const visibleItems = Math.min(4, Math.floor(sliderWidth / itemWidth)); let currentIndex = 0; const maxIndex = Math.max(0, $items.length - visibleItems); $container.width(itemWidth * $items.length + 15 * ($items.length - 1)); function updateSlider() { const translateX = -currentIndex * itemWidth; $container.css({ "transform": `translateX(${translateX}px)`, "transition": "transform 0.4s ease" }); $slider.find(".left-btn").toggleClass("disabled", currentIndex === 0); $slider.find(".right-btn").toggleClass("disabled", currentIndex >= maxIndex); } $slider.find(".right-btn").off('click').on('click', function(e) { e.preventDefault(); e.stopPropagation(); if (!$(this).hasClass("disabled")) { currentIndex = Math.min(currentIndex + 1, maxIndex); updateSlider(); } }); $slider.find(".left-btn").off('click').on('click', function(e) { e.preventDefault(); e.stopPropagation(); if (!$(this).hasClass("disabled")) { currentIndex = Math.max(currentIndex - 1, 0); updateSlider(); } }); updateSlider(); let resizeTimer; $(window).on('resize', function() { clearTimeout(resizeTimer); resizeTimer = setTimeout(function() { const newVisibleItems = Math.min(4, Math.floor($slider.width() / itemWidth)); const newMaxIndex = Math.max(0, $items.length - newVisibleItems); if (currentIndex > newMaxIndex) currentIndex = newMaxIndex; updateSlider(); }, 250); }); }); } initProductSliders(); });