https://www.bitrix24.es/bitrix/templates/landing/js/include_areas/solutions_slider.js

1;(function() {
2	'use strict';
3
4	function InfinitySliderInitialization()
5	{
6		let sliders = document.querySelectorAll('[data-role="infinity-slider"]:not([data-initialized="true"])');
7		for (let i = 0; i < sliders.length; i++)
8		{
9			new InfinitySlider({node: sliders[i]});
10		}
11	}
12
13	function InfinitySlider(object)
14	{
15		this.falbackTimeoutId = null;
16
17		this.attributes = {
18			id: 'data-glide-id',
19			initialized: 'data-initialized',
20		};
21
22		this.classes = {
23			slider: 'glide',
24			track: 'glide__track',
25			slides: 'glide__slides',
26			slide: 'glide__slide',
27		};
28
29		this.slider = {
30			object: null
31		};
32
33		this.nodes = {
34			slider: null,
35			track: null,
36			slides: null,
37			slide: [],
38		};
39
40		if (!BX.type.isElementNode(object.node))
41		{
42			return;
43		}
44
45		this.nodes.slider = object.node;
46
47		this.nodes.track = this.nodes.slider.querySelector('[data-glide-el="track"]');
48		this.nodes.slides = this.nodes.slider.querySelector('[data-glide-el="slides"]');
49
50		let slide = this.nodes.slider.querySelectorAll('[data-glide-el="slide"]');
51		this.nodes.slide = Array.prototype.slice.call(slide);
52
53		this.id = BX.util.getRandomString(5);
54		this.nodes.slider.setAttribute(this.attributes.id, this.id);
55		this.nodes.slider.setAttribute('data-initialized', 'true');
56
57		BX.bind(window, 'resize', BX.delegate(this.onResize, this));
58		this.onResize();
59	}
60
61	InfinitySlider.prototype = {
62		onResize: function(event) {
63			clearTimeout(this.falbackTimeoutId);
64			this.falbackTimeoutId = setTimeout(function() {
65				if (window.innerWidth > 768)
66				{
67					this.makeSlider();
68				}
69				else
70				{
71					this.destroySlider();
72				}
73			}.bind(this), 250);
74		},
75        makeSlider: function() {
76            if (!this.slider.object) {
77                BX.addClass(this.nodes.slider, this.classes.slider);
78                BX.addClass(this.nodes.track, this.classes.track);
79                BX.addClass(this.nodes.slides, this.classes.slides);
80
81                this.slider.object = new Glide(`[data-glide-id="${this.id}"]`, {
82                    type: 'carousel',
83                    startAt: 0,
84                    perView: 7,
85                    gap: 15,
86                    hoverpause: false,
87                    keyboard: false,
88                    animationDuration: 10000,
89                    animationTimingFunc: 'linear',
90                    swipeThreshold: false,
91                    dragThreshold: false,
92                }).mount();
93            }
94        },
95		destroySlider: function() {
96			if (this.slider.object)
97			{
98				BX.removeClass(this.nodes.slider, this.classes.slider);
99				BX.removeClass(this.nodes.track, this.classes.track);
100				BX.removeClass(this.nodes.slides, this.classes.slides);
101
102				this.slider.object.settings.autoplay = 0;
103				this.slider.object.settings.animationDuration = 0;
104				this.slider.object.pause();
105				this.slider.object.destroy();
106				this.slider.object = null;
107			}
108		},
109	};
110
111	BX.ready(function() {
112		InfinitySliderInitialization();
113
114		function initializeGlide(selector, options) {
115			const glide = new Glide(selector, options);
116			glide.mount();
117		}
118
119		const sliderOptions = {
120			type: 'carousel',
121			animationDuration: 500,
122			animationTimingFunc: "ease-in-out",
123			duration: 10,
124			animationTime: 2,
125			perView: 1,
126			gap: 10,
127			autoplay: false,
128		};
129
130		$(window).on('load', () => {
131			const sliders = ['.solutions-slider__glide'];
132
133			sliders.forEach((selector) => {
134				initializeGlide(selector, sliderOptions);
135			});
136		});
137	});
138})();