https://habana.ai/wp-content/themes/habana-child/js/custom-slider.js?ver=1790276913

1(function($){
2	
3	if( $('.home-page-banner-slider').length ){
4
5       // $('.home-page-banner-slider > .gb-inside-container').addClass('slider single-item');
6		$('.home-page-banner-slider > .slider-wrapper').addClass('slider single-item');
7
8        var html = '<div class="progressBarContainer">';
9
10            if( $('.slider-item').length ){
11
12                var css_class;
13                $('.slider-item').each(function(index, el) {
14                    
15                    var slider_category = $(this).find('.slide-category').text();
16					var slider_link_title = $(this).find('.slide-link a').text();
17					var slider_link = $(this).find('.slide-link a').attr('href');
18                    var slider_title = $(this).find('.slide-title').text();
19                    var active_class = '';
20
21                    if( index == 0 ){
22                        if( $(this).find('.slide-extra-info').hasClass('dark') ){
23                            css_class = 'dark';
24                            active_class = 'active';
25                        }else if ( $(this).find('.slide-extra-info').hasClass('light') ) {
26                            css_class = 'light';
27                            active_class = 'active';
28                        }else{
29                            css_class = '';
30                            active_class = '';
31                        }
32                    }
33
34                    html += '<div class="item slide-progress-item '+css_class+' '+active_class+' ">';
35
36                        html += '<span data-slick-index="'+index+'" class="progressBar"></span>';
37
38                        if( !$(this).find('.slide-category').hasClass('hide') ){
39                            html += '<h5 class="category">'+slider_category+'</h5>';
40                        }
41                        if( !$(this).find('.slide-title').hasClass('hide') ){
42                            html += '<span class="title slider-text">'+slider_title+'</span>';
43                        }
44					if( !$(this).find('.slide-link').hasClass('hide') ){
45                            html += '<a href="'+slider_link+'" class="link">'+slider_link_title+'</a>';
46                        }
47
48                    html += '</div>';
49
50                });
51
52            }
53
54        html += '</div>';
55
56       // $(html).insertAfter($('.home-page-banner-slider > .gb-inside-container'));
57		$(html).insertAfter($('.home-page-banner-slider > .slider-wrapper'));
58
59        var home_page_banner_slider = $('.home-page-banner-slider > .slider-wrapper').slick({
60            infinite: true,
61            arrows: true,
62            dots: true,
63            autoplay: false,
64            speed: 600,
65			autoplaySpeed:6000, //update in line #98, not here
66            slidesToShow: 1,
67            slidesToScroll: 1,
68            fade: true,
69            cssEase: 'ease-in-out',
70			draggable:false
71        });
72		
73			
74
75        $(home_page_banner_slider).on('beforeChange', function(event, { slideCount: count }, currentSlide, nextSlide){
76            //change color here
77
78            $('.slide-progress-item').removeClass('dark light active');
79
80            if( $('.slick-slide[data-slick-index="'+nextSlide+'"]').find('.slide-extra-info').hasClass('dark') ){
81                $('.slide-progress-item').addClass('dark');
82            }else if ( $('.slick-slide[data-slick-index="'+nextSlide+'"]').find('.slide-extra-info').hasClass('light') ) {
83                $('.slide-progress-item').addClass('light');
84            }else{
85                $('.slide-progress-item').removeClass('dark light');
86            }
87
88            $('.progressBar[data-slick-index="'+nextSlide+'"]').closest('.slide-progress-item').addClass('active');
89
90        });
91
92        if( $('.progressBarContainer').length ){
93
94            //ticking machine
95            var percentTime;
96            var tick;
97            var time = 600000;
98            var progressBarIndex = 0;
99
100            $('.progressBarContainer .progressBar').each(function(index) {

101                var progress = "<div class='inProgress inProgress" + index + "'></div>";
102                $(this).html(progress);
103            });
104
105            function startProgressbar() {
106                resetProgressbar();
107                percentTime = 0;
108                tick = setInterval(interval, 10);
109            }
110
111            function interval() {
112                if (($('.slider .slick-track div[data-slick-index="' + progressBarIndex + '"]').attr("aria-hidden")) === "true") {
113                    progressBarIndex = $('.slider .slick-track div[aria-hidden="false"]').data("slickIndex");
114                    startProgressbar();
115                } else {
116                    percentTime += 1 / time;
117                    $('.inProgress' + progressBarIndex).css({
118                        width: percentTime + "%"
119                    });
120                    if (percentTime >= 100) {
121                        $('.single-item').slick('slickNext');
122                        progressBarIndex++;
123                        if (progressBarIndex > ( $('.slider-item').length - 1 ) ) {
124                            progressBarIndex = 0;
125                        }
126                        startProgressbar();
127                    }
128                }
129            }
130
131            function resetProgressbar() {
132                $('.inProgress').css({
133                    width: 0 + '%'
134                });
135                clearInterval(tick);
136            }
137
138            startProgressbar();
139            // End ticking machine
140
141            $('.item').click(function () {
142                clearInterval(tick);
143                var goToThisIndex = $(this).find("span").data("slickIndex");
144                $('.single-item').slick('slickGoTo', goToThisIndex, false);
145                startProgressbar();
146            });
147        }
148        
149    }
150})(jQuery);