// script.js
// Function to add arrow button click events for each carousel
document.querySelectorAll('.carousel-container').forEach(container => {
// Get the carousel and arrow buttons inside this container
const carousel = container.querySelector('.carousel');
const btnLeft = container.querySelector('.carousel-button.left');
const btnRight = container.querySelector('.carousel-button.right');
// Event listener for left arrow button
btnLeft.addEventListener('click', () => {
// Get the width of one slide plus the gap (10px)
const slide = carousel.querySelector('.slide');
if (slide) {
carousel.scrollBy({
left: -(slide.offsetWidth + 10),
behavior: 'smooth'
});
}
});
// Event listener for right arrow button
btnRight.addEventListener('click', () => {
const slide = carousel.querySelector('.slide');
if (slide) {
carousel.scrollBy({
left: slide.offsetWidth + 10,
behavior: 'smooth'
});
}
});
});
// Add touch support for swiping on mobile devices
document.querySelectorAll('.carousel').forEach(carousel => {
let isTouching = false;
let startX = 0;
let scrollStart = 0;
// Touch start event
carousel.addEventListener('touchstart', (e) => {
isTouching = true;
startX = e.touches[0].clientX;
scrollStart = carousel.scrollLeft;
});
// Touch move event for swiping
carousel.addEventListener('touchmove', (e) => {
if (!isTouching) return;
const touchX = e.touches[0].clientX;
// Calculate how far the finger has moved
const moveDiff = startX - touchX;
carousel.scrollLeft = scrollStart + moveDiff;
});
// Touch end event - reset flag
carousel.addEventListener('touchend', () => {
isTouching = false;
});
});
/*
Optional: You can also add mouse drag events for desktop if needed.
Uncomment the code below to enable click-and-drag scrolling with a mouse.
document.querySelectorAll('.carousel').forEach(carousel => {
let isDown = false;
let startX, scrollLeft;
carousel.addEventListener('mousedown', (e) => {
isDown = true;
startX = e.pageX - carousel.offsetLeft;
scrollLeft = carousel.scrollLeft;
});
carousel.addEventListener('mouseleave', () => {
isDown = false;
});
carousel.addEventListener('mouseup', () => {
isDown = false;
});
carousel.addEventListener('mousemove', (e) => {
if (!isDown) return;
e.preventDefault();
const x = e.pageX - carousel.offsetLeft;
const walk = (x - startX) * 2; // Adjust scroll speed as needed
carousel.scrollLeft = scrollLeft - walk;
});
});
*/
