https://pscb.ru/bitrix/templates/pscb_new/scripts/splider_initializer.js?17902672383515

1// Splider see https://splidejs.com/
2// Custom updateHeight function see https://github.com/Splidejs/splide/issues/227
3document.addEventListener('DOMContentLoaded', function () {
4	let bannerSplide = document.getElementById('js-slider-1');
5	if (bannerSplide !== null) {
6		let bannerSlider = new Splide(bannerSplide, {
7			arrows: true,
8			autoplay: true,
9			interval: 5000,
10			breakpoints: {
11				768: { arrows: false, autoplay: false },
12			},
13			perPage: 1,
14			perMove: 1,
15			type: 'loop',
16			speed: 800,
17		});
18
19		let updateHeight = newIndex => {
20			let slide = bannerSlider.Components.Slides.getAt(typeof (newIndex) == 'number' ? newIndex : bannerSlider.index).slide;
21			slide.parentElement.parentElement.style.height = slide.offsetHeight + 'px';
22		};
23
24		bannerSlider.mount()
25		if (document.documentElement.clientWidth <= 768) {
26			bannerSlider.on('move resize', updateHeight);
27			updateHeight();
28		}
29	}
30
31	if (window.innerWidth <= 767) {
32		let accountSplide = document.getElementById('js-slider-2');
33		if (accountSplide !== null) {
34			accountSplide.classList.add('splide');
35			let accountSlider = new Splide(accountSplide, {
36				arrows: false,
37				pagination: false,
38			});
39			let bar = accountSlider.root.querySelector('.slider-progress-bar');
40			bar.classList.add('visible');
41			// Updates the bar width whenever the carousel moves:
42			accountSlider.on('mounted move', function () {
43				let end = accountSlider.Components.Controller.getEnd() + 1;
44				let rate = Math.min((accountSlider.index + 1) / end, 1);
45				bar.style.width = String(100 * rate) + '%';
46			});
47			accountSlider.mount()
48		}
49	}
50
51	let bestSplide = document.getElementById('js-slider-3');
52	if (bestSplide !== null) {
53		new Splide('#js-slider-3', {
54			arrows: true,
55			drag: false,
56			perPage: 4,
57			perMove: 1,
58			gap: 30,
59			breakpoints: {
60				992: { drag: true, perPage: 2, padding: { right: 100 } },
61				768: { drag: true, perPage: 2, padding: { right: 100 }, arrows: false },
62				576: { drag: true, perPage: 1, padding: { right: 100 } },
63			},
64		})
65			.mount();
66	}
67
68	var newsSplide = document.getElementById('js-slider-4');
69	if (newsSplide !== null) {
70		newsSplide.classList.add('splide');
71		newsSlider = new Splide(newsSplide, {
72			arrows: true,
73			drag: false,
74			gap: 32,
75			perPage: 3,
76			perMove: 3,
77			breakpoints: {
78				992: { drag: true, perPage: 2 },
79				768: { drag: true, perPage: 2, perMove: 2, arrows: false },
80				576: { drag: true, perPage: 1, perMove: 1}
81			},
82		});
83
84		let updateHeight = newIndex => {
85			let slide = newsSlider.Components.Slides.getAt(typeof (newIndex) == 'number' ? newIndex : newsSlider.index).slide;
86			slide.parentElement.parentElement.style.height = slide.offsetHeight + 'px';
87		};
88
89		newsSlider.mount()
90		if (document.documentElement.clientWidth <= 768) {
91			newsSlider.on('move resize', updateHeight);
92			updateHeight();
93		}
94	}
95
96	if (window.innerWidth <= 991) {
97		var stepsSplide = document.getElementById('js-slider-5');
98		if (stepsSplide !== null) {
99			stepsSplide.classList.add('splide');
100			let stepsSlider = new Splide(stepsSplide, {
101				arrows: false,
102				pagination: false,
103			});
104			let bar = stepsSlider.root.querySelector('.slider-progress-bar');
105			bar.classList.add('visible');
106			// Updates the bar width whenever the carousel moves:
107			stepsSlider.on('mounted move', function () {
108				let end = stepsSlider.Components.Controller.getEnd() + 1;
109				let rate = Math.min((stepsSlider.index + 1) / end, 1);
110				bar.style.width = String(100 * rate) + '%';
111			});
112			stepsSlider.mount()
113		}
114	}
115});