Lemax Motorcyles - motos OffRoad

¡Tu carrito está vacío!

PRUEBA

Carrusel Responsive con Selección /* Contenedor principal del carrusel */ .mi-carrusel { width: 100%; max-width: 320px; margin: 0 auto; position: relative font-family: Arial, sans-serif; } /* Imagen del carrusel */ .mi-carrusel img { width: 100%; height: auto; border-radius: 10px; cursor: pointer; border box-sizing: border-box; transition: border-color 0.3s ease; display: block; } /* Borde verde cuando la imagen está seleccionada */ .mi-carrusel border-color: #28a745; } /* Palomita que indica selección */ .mi-carrusel .checkmark { position: absolute; top: 10px; right: 10px; background: #28a745; color: white border-radius: 50%; padding: 6px 9px; font-weight: bold; font-size: 18px; display: none; user-select: none; } /* Mostrar la palomita */ .mi display: block; } /* Botones de navegación */ .mi-carrusel .btn { position: absolute; top: 50%; transform: translateY(-50%); background: rgba(0,0,0 border: none; color: white; font-size: 24px; cursor: pointer; padding: 8px 12px; border-radius: 50%; user-select: none; width: 40px; height } /* Efecto hover en botones */ .mi-carrusel .btn:hover { background: rgba(0,0,0,0.7); } /* Posición de los botones */ .mi left: 10px; } .mi-carrusel #next { right: 10px; } /* Ajustes para pantallas pequeñas */ @media (max-width: 400px) { .mi-carrusel .btn { font-size width: 30px; height: 30px; padding: 6px 8px; } .mi-carrusel .checkmark { font-size: 14px; padding: 4px 6px; } } ✔ ⟨ ⟩ // URLs de las imágenes const images = [ "https://picsum.photos/id/1015/320/200", "https://picsum.photos/id/1016/320/200" ]; let currentIndex = 0; // Imagen que let selectedIndex = null; // Imagen seleccionada (puede ser null) const carouselImage = document.getElementById('carouselImg'); const checkmark = document.querySelector('.mi-carrusel .checkmark'); const const nextBtn = document.getElementById('next'); // Función para actualizar imagen y estado visual function update() { carouselImage.src = images[currentIndex]; if (selectedIndex carouselImage.classList.add('selected'); checkmark.classList.add('visible'); } else { carouselImage.classList.remove('selected'); checkmark.classList.remove('visible'); } } // Cambiar a imagen anterior prevBtn.addEventListener('click', () => { currentIndex = (currentIndex - 1 + images.length) % images.length; update(); }); // Cambiar a imagen siguiente nextBtn.addEventListener('click', () => { currentIndex = (currentIndex + 1 update(); }); // Seleccionar o deseleccionar imagen actual al hacer clic carouselImage.addEventListener('click', () => { if (selectedIndex === currentIndex) { selectedIndex = null; // Deseleccionar si ya estaba } else { selectedIndex = currentIndex; // Seleccionar } update(); }); // Mostrar la imagen inicial update ...