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

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