https://aquatorya.ru/local/templates/sotbit_b2c/components/bitrix/news.list/thin_banner/script.js

1BX.Sotbit.B2C.components.ThinBanner = class {
2  constructor(params) {
3    this.useSlider = params.useSlider;
4    this.sliderSelector = params.sliderSelector;
5    this.autoplayEnabled = params.autoplayEnabled;
6    this.autoplayInterval = params.autoplayInterval;
7
8    if (this.useSlider) {
9      this.createSlider().then(() => this.initObserver());
10    }
11  }
12
13  async createSlider() {
14    const sliderOptions = {
15      loop: true,
16      arrows: true,
17      pagination: true,
18      slides: {
19        spacing: 16
20      }
21    };
22
23    if (this.autoplayEnabled) {
24      sliderOptions.autoplay = {
25        enabled: true,
26        interval: this.autoplayInterval
27      }
28    }
29
30    this.slider = await BX.Sotbit.B2C.createSlider(this.sliderSelector, sliderOptions, 'KeenSlider');
31  }
32
33  initObserver() {
34    this.observer = new IntersectionObserver((entries, observer) => {
35      entries.forEach((entry) => {
36        if (!entry.isIntersecting) {
37          return;
38        }
39
40        const sourceElements = entry.target.querySelectorAll('source');
41
42        if (!sourceElements.length) {
43          return observer.unobserve(entry.target);
44        }
45
46        sourceElements.forEach((sourceElement) => {
47          const dataSrcset = sourceElement.dataset.srcset;
48
49          if (dataSrcset) {
50            sourceElement.setAttribute('srcset', sourceElement.dataset.srcset);
51          }
52        });
53
54        observer.unobserve(entry.target);
55      });
56    });
57
58    const elementsToObserve = this.slider
59      ? this.slider.slides
60      : [...document.querySelector(this.sliderSelector).children]
61
62    elementsToObserve.forEach((slide) => this.observer.observe(slide));
63  }
64}