Descubre las últimas tendencias
New Arrivals
Segunda Mano
if (carousel && dotsContainer) {
const dots = dotsContainer.querySelectorAll('span');
const items = carousel.querySelectorAll('.flex-shrink-0');
const updateDots = () => {
const scrollLeft = carousel.scrollLeft;
const itemWidth = items.length > 0 ? items[0].offsetWidth + 16 : 0; // Ancho del item + espacio (space-x-4 = 16px)
if (itemWidth === 0) return; // Evitar división por cero si no hay items
let activeIndex = Math.round(scrollLeft / itemWidth);
// Asegurarse de que activeIndex está dentro de los límites
activeIndex = Math.max(0, Math.min(activeIndex, dots.length - 1));
dots.forEach((dot, index) => {
if (index === activeIndex) {
dot.classList.add('bg-pink-500');
dot.classList.remove('bg-gray-300');
} else {
dot.classList.add('bg-gray-300');
dot.classList.remove('bg-pink-500');
}
});
};
carousel.addEventListener('scroll', updateDots);
updateDots(); // Inicializar los puntos al cargar la página
} else {
// console.warn('Carousel or Dots container not found for inline script.');
}
});
-->
document.addEventListener('DOMContentLoaded', () => {
const carousel = document.querySelector('.overflow-x-scroll');
const dotsContainer = document.querySelector('.justify-center.mt-4');
const dots = dotsContainer.querySelectorAll('span');
const items = carousel.querySelectorAll('.flex-shrink-0');
const updateDots = () => {
const scrollLeft = carousel.scrollLeft;
const itemWidth = items[0].offsetWidth + 16; // Ancho del item + espacio (space-x-4 = 16px)
const activeIndex = Math.round(scrollLeft / itemWidth);
dots.forEach((dot, index) => {
if (index === activeIndex) {
dot.classList.add('bg-gray-400');
dot.classList.remove('bg-gray-200');
} else {
dot.classList.add('bg-gray-200');
dot.classList.remove('bg-gray-400');
}
});
};
// carousel.addEventListener('scroll', updateDots);
// updateDots(); // Inicializar los puntos al cargar la página
// });
//
