https://jkyog.in/static/home/js/home.js

1const {Observable, Subject} = rxjs;
2class JKYSlideChanger
3{
4    arrayNavs = []
5
6    dataElement
7    index = 0
8    interval
9    navigationChnageObservable
10    intervalTimeout
11    thumbnailContainer
12    visibleThumbnails = 4
13    thumbnailWidth = 310
14    centerPos = 2
15
16    constructor(intervalTimeout, arrNavs="", dataContainer="")
17    {
18        this.arrayNavs = $(".banner-thumbnail-container .thumbnail-container .thumbnail")
19        this.thumbnailContainer = $(".banner-thumbnail-container .thumbnail-container")
20        this.intervalTimeout=intervalTimeout
21        this.index = 0
22
23        this.populateBannerIds();
24        this.setupEventHandlers();
25    }
26
27    populateBannerIds() {
28        $.each($(".home-banner-container .home-banner-item-container").children(".home-banner-item"), 
29            function(index, value){
30                $(value).attr("id", "banner-element-"+index);
31            });
32    
33        $.each($(".banner-thumbnail-container .thumbnail-container").children(".thumbnail"), 
34            function(index, value){
35                $(value).attr("data-for", "banner-element-"+index);
36            });
37    }
38
39    startSlider()
40    {
41        $(".home-banner-container .banner-thumbnail-container .thumbnail").css("--animation-timeout", this.intervalTimeout+"ms")
42        this.navigationChnageObservable = new Subject()
43
44        this.navigationChnageObservable.subscribe((value)=>{
45            let jqElement = ".home-banner-container .home-banner-item-container .home-banner-item"
46            let jqActive = jqElement+"#"+value;
47
48            $(jqElement).removeClass("active");
49            $(jqActive).addClass("active");
50        })
51
52        this.nextSlide()
53        this.interval = setInterval(()=>{this.nextSlide()}, this.intervalTimeout)
54    }
55
56    toSlide(index)
57    {
58        clearInterval(this.interval);
59        if (index > this.arrayNavs.length || index < 0 || index === this.arrayNavs.length )
60        {
61            this.index = 0
62        }
63        else
64        {
65            this.index = index
66        }
67
68        this.nextSlide()
69        this.interval = setInterval(()=>{this.nextSlide()}, this.intervalTimeout)
70    }
71
72    nextSlide()
73    {
74        if (this.index === this.arrayNavs.length)
75        {
76            this.index = 0
77        }
78
79        this.arrayNavs.removeClass("active");
80        $(this.arrayNavs[this.index]).addClass("active");
81        this.navigationChnageObservable.next($(this.arrayNavs[this.index]).data("for"))
82        
83        this.centerActiveThumbnail(this.index)
84        
85        this.index++
86    }
87
88    setupEventHandlers() {
89        // Thumbnail click handler
90        $(".banner-thumbnail-container .thumbnail-container .thumbnail")
91            .on("click", (e) => {
92                let elementID = $(e.currentTarget).data("for");
93                this.toSlide(elementID.slice(15, elementID.length));
94            });
95        
96        // Left arrow click
97        $(".thumbnail-nav-left").on("click", (e) => {
98            e.preventDefault();
99            let currentScroll = this.thumbnailContainer.scrollLeft();
100            this.thumbnailContainer.animate({
101                scrollLeft: Math.max(0, currentScroll - this.thumbnailWidth)
102            }, 0);
103        });
104        
105        // Right arrow click
106        $(".thumbnail-nav-right").on("click", (e) => {
107            e.preventDefault();
108            let currentScroll = this.thumbnailContainer.scrollLeft();
109            let maxScroll = this.thumbnailContainer[0].scrollWidth - 
110                           this.thumbnailContainer.outerWidth();
111            this.thumbnailContainer.animate({
112                scrollLeft: Math.min(maxScroll, currentScroll + this.thumbnailWidth)
113            }, 0);
114        });
115        
116        this.thumbnailContainer.on("scroll", () => {
117            this.updateArrowVisibility();
118        });
119        
120        this.updateArrowVisibility();
121    }
122    
123    updateArrowVisibility() {
124        let currentScroll = this.thumbnailContainer.scrollLeft();
125        let maxScroll = this.thumbnailContainer[0].scrollWidth - 
126                       this.thumbnailContainer.outerWidth();
127        
128        $(".thumbnail-nav-left").toggleClass("disabled", currentScroll <= 0);
129        $(".thumbnail-nav-right").toggleClass("disabled", currentScroll >= maxScroll);
130    }
131

132    centerActiveThumbnail(activeIndex) {
133        if (this.arrayNavs.length <= this.visibleThumbnails) {
134          return;
135        }
136      
137        const firstVisible = Math.max(
138          0,
139          Math.min(activeIndex - this.centerPos, this.arrayNavs.length - this.visibleThumbnails)
140        );
141      
142        const targetScrollLeft = firstVisible * this.thumbnailWidth;
143      
144        this.thumbnailContainer.animate({ scrollLeft: targetScrollLeft }, 0);
145    }
146}
147
148
149$(function () {
150    let slider = new JKYSlideChanger(5000)
151    slider.startSlider()
152});