Volver a los detalles del artículo PAPYRUS, UN SISTEMA DE ARCHIVOS DIGITALES (SAD) PARA EL PERFECCIONAMIENTO DEL PROCESO DE UNIVERSALIZACIÓN DE LA CARRERA DE INFORMÁTICA EN EL ISP FÉLIX VARELA Descargar Descargar PDF
/** * Responsive Image Carousel * * Features: * - Automatic sliding with configurable timing * - Responsive design (3 images on desktop, 1 on mobile) * - Navigation controls * - Pause on hover * - Smooth transitions */ (function() { // Only run this script once the DOM is fully loaded document.addEventListener('DOMContentLoaded', function() { // Get DOM elements const track = document.querySelector('.tc-track'); const cards = Array.from(document.querySelectorAll('.tc-card')); const prevButton = document.querySelector('.tc-prev'); const nextButton = document.querySelector('.tc-next'); // Configuration options const autoplaySpeed = 4000; // Time between slides in milliseconds const transitionSpeed = 500; // Slide transition speed in milliseconds // Responsive settings const cardsToShow = window.innerWidth < 768 ? 1 : 3; const cardWidth = cards[0].offsetWidth + 20; // card width + margin // State variables let currentIndex = 0; let isTransitioning = false; let autoplayInterval; /** * Initialize the carousel */ function initCarousel() { // Set initial position updateCarousel(); // Start autoplay startAutoplay(); } /** * Update carousel position based on current index */ function updateCarousel() { // Calculate position const position = -1 * currentIndex * cardWidth; track.style.transform = `translateX(${position}px)`; // Prevent multiple clicks during transition isTransitioning = true; setTimeout(() => { isTransitioning = false; }, transitionSpeed); } /** * Go to a specific slide index * @param {number} index - The slide index to navigate to */ function goToSlide(index) { if (isTransitioning) return; // Ensure index is within bounds currentIndex = index; if (currentIndex > cards.length - cardsToShow) { currentIndex = cards.length - cardsToShow; } if (currentIndex < 0) { currentIndex = 0; } updateCarousel(); resetAutoplay(); } /** * Navigate to the previous slide */ function goToPrevSlide() { if (isTransitioning) return; goToSlide(currentIndex - 1); } /** * Navigate to the next slide */ function goToNextSlide() { if (isTransitioning) return; // Handle wrapping around to the first slide if (currentIndex >= cards.length - cardsToShow) { goToSlide(0); } else { goToSlide(currentIndex + 1); } } /** * Start the autoplay interval */ function startAutoplay() { autoplayInterval = setInterval(goToNextSlide, autoplaySpeed); } /** * Reset the autoplay timer */ function resetAutoplay() { clearInterval(autoplayInterval); startAutoplay(); } // Set up event listeners // Navigation button events prevButton.addEventListener('click', goToPrevSlide); nextButton.addEventListener('click', goToNextSlide); // Pause autoplay on hover const carouselWrapper = document.querySelector('.tc-wrapper'); carouselWrapper.addEventListener('mouseenter', () => { clearInterval(autoplayInterval); }); carouselWrapper.addEventListener('mouseleave', () => { startAutoplay(); }); // Handle window resize window.addEventListener('resize', () => { const newCardsToShow = window.innerWidth < 768 ? 1 : 3; // Only update if the number of visible cards changed if (newCardsToShow !== cardsToShow) { // Temporarily disable transitions for repositioning cards.forEach(card => { card.style.transition = 'none'; }); // Reset position after a brief delay setTimeout(() => { cards.forEach(card => { card.style.transition = 'transform 0.3s ease, box-shadow 0.3s ease'; }); goToSlide(0); }, 50); } }); // Initialize the carousel initCarousel(); }); })();