| document.addEventListener('DOMContentLoaded', () => { | |
| const presentation = document.querySelector('.presentation-container'); | |
| const slides = document.querySelectorAll('.slide'); | |
| const prevBtn = document.getElementById('prev-btn'); | |
| const nextBtn = document.getElementById('next-btn'); | |
| let currentSlide = 0; | |
| // Update slide position | |
| function updateSlide() { | |
| presentation.scrollTo({ | |
| left: currentSlide * window.innerWidth, | |
| behavior: 'smooth' | |
| }); | |
| } | |
| // Next slide | |
| nextBtn.addEventListener('click', () => { | |
| if (currentSlide < slides.length - 1) { | |
| currentSlide++; | |
| updateSlide(); | |
| } | |
| }); | |
| // Previous slide | |
| prevBtn.addEventListener('click', () => { | |
| if (currentSlide > 0) { | |
| currentSlide--; | |
| updateSlide(); | |
| } | |
| }); | |
| // Keyboard navigation | |
| document.addEventListener('keydown', (e) => { | |
| if (e.key === 'ArrowRight' || e.key === ' ') { | |
| if (currentSlide < slides.length - 1) { | |
| currentSlide++; | |
| updateSlide(); | |
| } | |
| } else if (e.key === 'ArrowLeft') { | |
| if (currentSlide > 0) { | |
| currentSlide--; | |
| updateSlide(); | |
| } | |
| } | |
| }); | |
| // Touch/swipe support | |
| let touchStartX = 0; | |
| let touchEndX = 0; | |
| presentation.addEventListener('touchstart', (e) => { | |
| touchStartX = e.changedTouches[0].screenX; | |
| }); | |
| presentation.addEventListener('touchend', (e) => { | |
| touchEndX = e.changedTouches[0].screenX; | |
| handleSwipe(); | |
| }); | |
| function handleSwipe() { | |
| if (touchEndX < touchStartX && currentSlide < slides.length - 1) { | |
| currentSlide++; | |
| updateSlide(); | |
| } | |
| if (touchEndX > touchStartX && currentSlide > 0) { | |
| currentSlide--; | |
| updateSlide(); | |
| } | |
| } | |
| }); | |