https://ravichaganti.com/js/book-slider.js

1// Book Slider Functionality
2document.addEventListener('DOMContentLoaded', function() {
3  const slides = document.querySelectorAll('.book-slide');
4  const dots = document.querySelectorAll('.slider-dot');
5  const prevButton = document.querySelector('.slider-prev');
6  const nextButton = document.querySelector('.slider-next');
7
8  if (slides.length === 0) return;
9
10  let currentSlide = 0;
11
12  function showSlide(index) {
13    // Hide all slides
14    slides.forEach(slide => slide.classList.remove('active'));
15    dots.forEach(dot => dot.classList.remove('active'));
16
17    // Show current slide
18    slides[index].classList.add('active');
19    dots[index].classList.add('active');
20
21    currentSlide = index;
22  }
23
24  function nextSlide() {
25    const next = (currentSlide + 1) % slides.length;
26    showSlide(next);
27  }
28
29  function prevSlide() {
30    const prev = (currentSlide - 1 + slides.length) % slides.length;
31    showSlide(prev);
32  }
33
34  // Event listeners
35  if (nextButton) {
36    nextButton.addEventListener('click', nextSlide);
37  }
38
39  if (prevButton) {
40    prevButton.addEventListener('click', prevSlide);
41  }
42
43  dots.forEach((dot, index) => {
44    dot.addEventListener('click', () => showSlide(index));
45  });
46
47  // Keyboard navigation
48  document.addEventListener('keydown', function(e) {
49    if (e.key === 'ArrowLeft') {
50      prevSlide();
51    } else if (e.key === 'ArrowRight') {
52      nextSlide();
53    }
54  });
55
56  // Touch swipe support for mobile devices
57  const sliderWrapper = document.querySelector('.book-slider-wrapper');
58  if (sliderWrapper) {
59    let touchStartX = 0;
60    let touchEndX = 0;
61    let touchStartY = 0;
62    let touchEndY = 0;
63
64    sliderWrapper.addEventListener('touchstart', (e) => {
65      touchStartX = e.changedTouches[0].screenX;
66      touchStartY = e.changedTouches[0].screenY;
67    }, { passive: true });
68
69    sliderWrapper.addEventListener('touchmove', (e) => {
70      touchEndX = e.changedTouches[0].screenX;
71      touchEndY = e.changedTouches[0].screenY;
72    }, { passive: true });
73
74    sliderWrapper.addEventListener('touchend', () => {
75      const swipeDistanceX = touchStartX - touchEndX;
76      const swipeDistanceY = Math.abs(touchStartY - touchEndY);
77      const minSwipeDistance = 50; // Minimum distance for swipe
78
79      // Only handle horizontal swipes (ignore if more vertical movement)
80      if (Math.abs(swipeDistanceX) > minSwipeDistance && Math.abs(swipeDistanceX) > swipeDistanceY) {
81        if (swipeDistanceX > 0) {
82          // Swipe left - go to next
83          nextSlide();
84        } else {
85          // Swipe right - go to previous
86          prevSlide();
87        }
88      }
89    }, { passive: true });
90  }
91
92  // Optional: Auto-play (uncomment if desired)
93  // setInterval(nextSlide, 5000);
94});