66 lines
1.8 KiB
JavaScript
66 lines
1.8 KiB
JavaScript
function showSlide(galleryId, slideIndex) {
|
|
const slides = document.querySelectorAll(`#${galleryId} .slide`);
|
|
const dots = document.querySelectorAll(`#${galleryId} .dot`);
|
|
|
|
// Hide all slides
|
|
slides.forEach(slide => {
|
|
slide.classList.remove('active');
|
|
});
|
|
|
|
// Remove active class from all dots
|
|
dots.forEach(dot => {
|
|
dot.classList.remove('active');
|
|
});
|
|
|
|
// Show the selected slide and activate dot
|
|
slides[slideIndex].classList.add('active');
|
|
dots[slideIndex].classList.add('active');
|
|
}
|
|
|
|
function moveSlide(galleryId, direction) {
|
|
const slides = document.querySelectorAll(`#${galleryId} .slide`);
|
|
let currentIndex = 0;
|
|
|
|
// Find current active slide
|
|
slides.forEach((slide, index) => {
|
|
if (slide.classList.contains('active')) {
|
|
currentIndex = index;
|
|
}
|
|
});
|
|
|
|
// Calculate new index
|
|
let newIndex = currentIndex + direction;
|
|
if (newIndex < 0) newIndex = slides.length - 1;
|
|
if (newIndex >= slides.length) newIndex = 0;
|
|
|
|
// Show the new slide
|
|
showSlide(galleryId, newIndex);
|
|
}
|
|
|
|
// Handle keyboard navigation
|
|
document.addEventListener('keydown', function(event) {
|
|
// Only handle if a gallery is present
|
|
const galleries = document.querySelectorAll('.image-gallery');
|
|
if (galleries.length === 0) return;
|
|
|
|
// Find gallery with active slide
|
|
let activeGalleryId = null;
|
|
galleries.forEach(gallery => {
|
|
const activeSlide = gallery.querySelector('.slide.active');
|
|
if (activeSlide) {
|
|
activeGalleryId = gallery.id;
|
|
}
|
|
});
|
|
|
|
if (!activeGalleryId) return;
|
|
|
|
// Left arrow
|
|
if (event.keyCode === 37) {
|
|
moveSlide(activeGalleryId, -1);
|
|
}
|
|
// Right arrow
|
|
else if (event.keyCode === 39) {
|
|
moveSlide(activeGalleryId, 1);
|
|
}
|
|
});
|