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

1(function(){
2
3    const pgTrack = document.querySelector('.pg-program-track');
4    const pgCards = document.querySelectorAll('.pg-program-card');
5    const pgSliderWrapper = document.querySelector('.pg-program-slider');
6
7    const prevBtn = document.querySelector('.pg-prev-btn');
8    const nextBtn = document.querySelector('.pg-next-btn');
9
10    if (!pgTrack || pgCards.length === 0) return;
11
12    let pgIndex = 0;
13    let pgAutoSlide;
14
15    function getPgVisibleCards() {
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(pgCards[0]);
22        const margin = parseFloat(style.marginLeft) + parseFloat(style.marginRight);
23        return pgCards[0].offsetWidth + margin;
24    }
25    function pgSlide() {
26        const visible = getPgVisibleCards();
27        const cardWidth = getCardWidth();
28        if (pgIndex > pgCards.length - visible) {
29            pgIndex = 0;
30        }
31        if (pgIndex < 0) {
32            pgIndex = pgCards.length - visible;
33        }
34        pgTrack.style.transform = `translateX(-${pgIndex * cardWidth}px)`;
35    }
36    function nextSlide() {
37        pgIndex++;
38        pgSlide();
39    }
40    function prevSlide() {
41        pgIndex--;
42        pgSlide();
43    }
44
45    function startPgAutoSlide() {
46        pgAutoSlide = setInterval(()=>{
47            nextSlide();
48        }, 4000);
49    }
50    function stopPgAutoSlide() {
51        clearInterval(pgAutoSlide);
52    }
53    nextBtn.addEventListener("click",nextSlide);
54    prevBtn.addEventListener("click",prevSlide);
55    startPgAutoSlide();
56    
57    pgSliderWrapper.addEventListener("mouseenter", stopPgAutoSlide);
58    pgSliderWrapper.addEventListener("mouseleave", startPgAutoSlide);
59
60    window.addEventListener("resize", pgSlide);
61})();