diff --git a/js/porfolio.js b/js/porfolio.js index 2a4d15e..1913d05 100644 --- a/js/porfolio.js +++ b/js/porfolio.js @@ -42,44 +42,44 @@ function ocultarDescripcionCarrera() { // ----------------------------------- Carrusel +document.querySelectorAll('.carousel-container').forEach(carousel => { + const carouselSlide = carousel.querySelector('.carousel-slide'); + const images = carousel.querySelectorAll('.carrrousel-item'); + + // Contadores + let counter = 0; + let size = images[0].clientWidth; // El tamaño de la primera imagen + + // Función para mover el carrusel + function updateCarouselPosition() { + carouselSlide.style.transition = 'transform 0.4s ease-in-out'; + carouselSlide.style.transform = 'translateX(' + (-size * counter) + 'px)'; + } + + // Mover al siguiente + carousel.querySelector('.nextBtn').addEventListener('click', () => { + if (counter >= images.length - 1) return; // Evitar avanzar más allá de la última imagen + counter++; + updateCarouselPosition(); + }); -const carouselSlide = document.querySelector('.carousel-slide'); -const images = document.querySelectorAll('.carrrousel-item'); - -// Contadores -let counter = 0; -let size = images[0].clientWidth; // El tamaño de la primera imagen - -// Función para mover el carrusel -function updateCarouselPosition() { - carouselSlide.style.transition = 'transform 0.4s ease-in-out'; - carouselSlide.style.transform = 'translateX(' + (-size * counter) + 'px)'; -} - -// Mover al siguiente -document.getElementById('nextBtn').addEventListener('click', () => { - if (counter >= images.length - 1) return; // Evitar avanzar más allá de la última imagen - counter++; - updateCarouselPosition(); -}); - -// Mover al anterior -document.getElementById('prevBtn').addEventListener('click', () => { - if (counter <= 0) return; // Evitar retroceder más allá de la primera imagen - counter--; - updateCarouselPosition(); -}); + // Mover al anterior + carousel.querySelector('.prevBtn').addEventListener('click', () => { + if (counter <= 0) return; // Evitar retroceder más allá de la primera imagen + counter--; + updateCarouselPosition(); + }); -// Recalcular el tamaño cuando la ventana cambie de tamaño -window.addEventListener('resize', () => { - size = images[0].clientWidth; // Recalcula el tamaño de la imagen - updateCarouselPosition(); // Ajusta la posición del carrusel + // Recalcular el tamaño cuando la ventana cambie de tamaño + window.addEventListener('resize', () => { + size = images[0].clientWidth; // Recalcula el tamaño de la imagen + updateCarouselPosition(); // Ajusta la posición del carrusel + }); }); - //------------------------ Animacion elevar document.addEventListener("DOMContentLoaded", function () {