https://xayalmuazzin.com/uploads/xayal-auto-articles/xayal-video-slider-fix.js?v=20260730-6

1/* XAYAL_VIDEO_SLIDER_FIX_V2 */
2(function () {
3  "use strict";
4
5  function initSlider(slider) {
6    if (!slider || slider.getAttribute("data-xayal-slider-ready") === "1") {
7      return;
8    }
9
10    var track = slider.querySelector(".xayal-video-slider__track");
11    var previous = slider.querySelector(".xayal-video-slider__prev");
12    var next = slider.querySelector(".xayal-video-slider__next");
13
14    if (!track || !previous || !next) {
15      return;
16    }
17
18    slider.setAttribute("data-xayal-slider-ready", "1");
19    slider.setAttribute("data-xayal-slider-position", String(Math.round(track.scrollLeft)));
20    track.addEventListener("scroll", function () {
21      slider.setAttribute("data-xayal-slider-position", String(Math.round(track.scrollLeft)));
22    }, { passive: true });
23
24    function scrollStep() {
25      var card = track.querySelector(".xayal-video-card");
26      var gap = parseFloat(window.getComputedStyle(track).gap) || 16;
27      var width = card ? card.getBoundingClientRect().width : 0;
28      return Math.max(width + gap, track.clientWidth * 0.82);
29    }
30
31    function move(direction) {
32      var step = scrollStep();
33      var maximum = Math.max(0, track.scrollWidth - track.clientWidth);
34      var target = Math.max(0, Math.min(maximum, track.scrollLeft + direction * step));
35      slider.setAttribute("data-xayal-slider-last-direction", String(direction));
36      slider.setAttribute("data-xayal-slider-last-target", String(Math.round(target)));
37      var previousBehavior = track.style.scrollBehavior;
38      track.style.scrollBehavior = "auto";
39      track.scrollLeft = target;
40      window.requestAnimationFrame(function () {
41        track.style.scrollBehavior = previousBehavior;
42      });
43    }
44
45    function activate(control, direction) {
46      control.setAttribute("role", "button");
47      control.setAttribute("tabindex", "0");
48
49      control.addEventListener("click", function (event) {
50        event.preventDefault();
51        event.stopPropagation();
52        move(direction);
53      });
54
55      control.addEventListener("keydown", function (event) {
56        if (event.key === "Enter" || event.key === " ") {
57          event.preventDefault();
58          move(direction);
59        }
60      });
61    }
62
63    activate(previous, -1);
64    activate(next, 1);
65  }
66
67  function boot() {
68    var sliders = document.querySelectorAll(".xayal-video-slider");
69    for (var index = 0; index < sliders.length; index += 1) {
70      initSlider(sliders[index]);
71    }
72  }
73
74  if (document.readyState === "loading") {
75    document.addEventListener("DOMContentLoaded", boot);
76  } else {
77    boot();
78  }
79})();