https://incanto.eu/local/templates/main/components/bitrix/catalog.section/new_goods/script.js?17884178205088

1const initSlider = (sliderSelector) => {
2        setTimeout(() => console.log(sliderSelector, typeof sliderSelector), 1000)
3
4        
5        $(sliderSelector)
6            .on('init', function(slick){
7                $(this).find('.slick-dots').prepend('<span class="slick-dots-line"></span>');
8                $(this).find('.slick-dots-line, .slick-dots li').width( (100 / $(this).find('.slick-dots li').length) + "%" );
9            })
10            .slick({
11                dots: false,
12                infinite: true,
13                slidesToShow: 4,
14                slidesToScroll: 4,
15                adaptiveHeight: true,
16                autoplay: true,
17                autoplaySpeed: 4000,
18                responsive: [
19                    {
20                        breakpoint: 1200,
21                        settings: {
22                            slidesToShow: 2,
23                            slidesToScroll: 2
24                        }
25                    },
26                    {
27                        breakpoint: 1200,
28                        settings: {
29                            slidesToShow: 2,
30                            slidesToScroll: 2
31                        }
32                    },
33                    {
34                        breakpoint: 768,
35                        settings: {
36                            slidesToShow: 2,
37                            slidesToScroll: 2,
38                            dots: true,
39                            arrows: false
40                        }
41                    }
42                ]
43            })
44            .on('breakpoint', function(event, slick, breakpoint){
45                if ( breakpoint == 768 ) {
46                    $(this).find('.slick-dots').prepend('<span class="slick-dots-line"></span>');
47                    $(this).find('.slick-dots-line, .slick-dots li').width( (100 / $(this).find('.slick-dots li').length) + "%" );
48                }
49            })
50            .on('swipe', function(slick, direction){
51                if ( $(this).find('.slick-dots li.slick-active').length ) {
52                    var left = $(this).find('.slick-dots li.slick-active').position().left;
53                    $(this).find('.slick-dots-line').css('left', left);
54                }
55            })
56            .on('beforeChange', function(event, slick, currentSlide, nextSlide){
57                var _ = slick, index = nextSlide,
58                    allSlides, indexOffset, remainder;
59    
60                allSlides = _.$slider
61                    .find('.slick-slide');
62    
63                if (index >= 0 && index <= (_.slideCount - _.options.slidesToShow)) {
64                    _.$slides
65                        .slice(index, index + _.options.slidesToShow)
66                        .addClass('need-lazy-loading');
67    
68                } else if (allSlides.length <= _.options.slidesToShow) {
69                    allSlides
70                        .addClass('need-lazy-loading');
71    
72                } else {
73                    remainder = _.slideCount % _.options.slidesToShow;
74                    indexOffset = _.options.infinite === true ? _.options.slidesToShow + index : index;
75    
76                    if (_.options.slidesToShow == _.options.slidesToScroll && (_.slideCount - index) < _.options.slidesToShow) {
77                        allSlides
78                            .slice(indexOffset - (_.options.slidesToShow - remainder), indexOffset + remainder)
79                            .addClass('need-lazy-loading');
80                    } else {
81                        allSlides
82                            .slice(indexOffset, indexOffset + _.options.slidesToShow)
83                            .addClass('need-lazy-loading');
84                    }
85                }
86    
87                $('.need-lazy-loading').find('.lazy').lazy({
88                    bind: 'event',
89                    delay: 0,
90                    afterLoad: function(element){
91                        element.closest('.lazy__box').addClass('is-loaded');
92                    }
93                });
94    
95                setTimeout(() => {
96                    if ( $(this).find('.slick-dots li.slick-active').length ) {
97                        let left = $(this).find('.slick-dots li.slick-active').position().left;
98                        $(this).find('.slick-dots-line').css('left', left);
99                    }
100                }, 200);
101            });
102    
103    
104}; 
105
106
107const createSliders = () => {
108    const media = matchMedia('(pointer: fine)');
109    const slidersMobile = document.querySelectorAll('.js-slider-catalog-mobile');
110    const slidersDesktop = document.querySelectorAll('.js-slider-catalog-desktop');
111    if (media.matches) {
112        initSlider('.js-slider-catalog-desktop');
113        slidersMobile.forEach((slider) => slider.closest('section').style.setProperty('display', 'none'));
114    } else {
115        initSlider('.js-slider-catalog-mobile');

116        slidersDesktop.forEach((slider) => slider.closest('section').style.setProperty('display', 'none'));
117    }
118};
119
120document.addEventListener('DOMContentLoaded', () => {
121    createSliders();
122});