https://www.mirkrasok.ru/local/templates/mirkrasok_2026v2/componen…/script.js?17869993714147

1function loadMainBannerSlide(slide) {
2    if (!slide) {
3        return null;
4    }
5
6    // Узкий макет баннера — отдельная картинка в <source media>, поэтому
7    // набор заполняем раньше самой картинки: выбор внутри <picture> браузер
8    // делает в момент, когда у <img> появляется src, и к этой секунде
9    // варианты уже должны быть на месте. Иначе на телефоне подхватится
10    // широкий файл.
11    var sources = slide.querySelectorAll('source[data-srcset]');
12    for (var i = 0; i < sources.length; i++) {
13        sources[i].srcset = sources[i].dataset.srcset;
14        sources[i].removeAttribute('data-srcset');
15    }
16
17    var image = slide.querySelector('img[data-src]');
18    if (image) {
19        image.src = image.dataset.src;
20        image.removeAttribute('data-src');
21    }
22
23    return slide.querySelector('img');
24}
25
26function loadVisibleMainBannerSlides(swiper) {
27    if (!swiper.slides || swiper.slides.length < 2) {
28        return;
29    }
30
31    var nextIndex = (swiper.activeIndex + 1) % swiper.slides.length;
32    loadMainBannerSlide(swiper.slides[swiper.activeIndex]);
33    loadMainBannerSlide(swiper.slides[nextIndex]);
34}
35
36function scheduleFollowingMainBannerSlide(swiper) {
37    var loadFollowing = function() {
38        if (!swiper.slides || swiper.slides.length < 3) {
39            return;
40        }
41
42        var followingIndex = (swiper.activeIndex + 2) % swiper.slides.length;
43        loadMainBannerSlide(swiper.slides[followingIndex]);
44    };
45
46    if ('requestIdleCallback' in window) {
47        window.requestIdleCallback(loadFollowing, {timeout: 2000});
48    } else {
49        window.setTimeout(loadFollowing, 300);
50    }
51}
52
53var mainBannerAutoplayDelay = window.matchMedia('(max-width: 600px)').matches ? 10000 : 5000;
54
55var swipermain = new Swiper(".mainBanner", {
56    spaceBetween: 30,
57    speed: 1000,
58    centeredSlides: true,
59    // Слайд сам является ссылкой. Стандартный role="group" от Swiper для
60    // элемента <a> недопустим и ломает accessibility tree в Lighthouse.
61    a11y: {
62        slideRole: null,
63    },
64    autoplay: {
65        // Avoid replacing the largest first-screen image during initial mobile rendering.
66        delay: mainBannerAutoplayDelay,
67        disableOnInteraction: false,
68    },
69    navigation: {
70        nextEl: ".swiper-button-next",
71        prevEl: ".swiper-button-prev",
72    },
73    // Прогресс-бар настраивается через pagination с типом progressbar
74    pagination: {
75        el: ".mainBanner .swiper-progressbar",
76        type: "progressbar",
77    },
78    // Добавляем наблюдателей
79    observer: true,
80    observeParents: true,
81    on: {
82        init: function() {
83            // Убираем класс lock принудительно
84            const progressbar = document.querySelector('.mainBanner .swiper-progressbar');
85            if (progressbar) {
86                progressbar.classList.remove('swiper-pagination-lock');
87            }
88            loadVisibleMainBannerSlides(this);
89            // Do not download the third banner during the first screen load.
90            // It is scheduled after the first transition below.
91        },
92        slideChangeTransitionStart: function() {
93            loadVisibleMainBannerSlides(this);
94        },
95        slideChangeTransitionEnd: function() {
96            scheduleFollowingMainBannerSlide(this);
97        }
98    },
99    breakpoints: {
100        0: {
101            slidesPerView: 1.08,
102            spaceBetween: 8,
103            centeredSlides: false
104        },
105        360: {
106            slidesPerView: 1.08,
107            spaceBetween: 8,
108            centeredSlides: false
109        },
110        601: {
111            slidesPerView: 1,
112            spaceBetween: 0,
113            centeredSlides: true
114        },
115        1024: {
116            slidesPerView: 1,
117            spaceBetween: 0,
118            centeredSlides: true
119        }
120    }
121});