https://www.hindujacollege.edu.in/assets/js/ug-course-slider.js

1(function() {
2
3    const track = document.querySelector('.program-track');
4    const cards = document.querySelectorAll('.program-card');
5    const sliderWrapper = document.querySelector('.program-slider');
6
7    const prevBtn = document.querySelector('.prev-btn');
8    const nextBtn = document.querySelector('.next-btn');
9
10    if (!track || cards.length === 0) return;
11
12    let index = 0;
13    let autoSlide;
14
15    function getVisibleCards() {
16        if (window.innerWidth <= 576) return 1;
17        if (window.innerWidth <= 992) return 2;
18        return 3;
19    }
20    function getCardWidth() {
21        const style = window.getComputedStyle(cards[0]);
22        const margin = parseFloat(style.marginLeft) + parseFloat(style.marginRight);
23        return cards[0].offsetWidth + margin;
24    }
25
26    function slide() {
27        const visible = getVisibleCards();
28        const cardWidth = getCardWidth();
29
30        if (index > cards.length - visible) {
31            index = 0;
32        }
33        if (index < 0) {
34            index = cards.length - visible;
35        }
36        track.style.transform = `translateX(-${index * cardWidth}px)`;
37    }
38    function next() {
39        index++;
40        slide();
41    }
42    function prev() {
43        index--;
44        slide();
45    }
46    function startAutoSlide() {
47        autoSlide = setInterval(()=>{
48            next();
49        }, 3000);
50    }
51    function stopAutoSlide() {
52        clearInterval(autoSlide);
53    }
54    nextBtn.addEventListener("click",next);
55    prevBtn.addEventListener("click",prev);
56
57    startAutoSlide();
58    sliderWrapper.addEventListener("mouseenter",stopAutoSlide);
59    sliderWrapper.addEventListener("mouseleave",startAutoSlide);
60    window.addEventListener("resize",slide);
61})();