https://www.sweg.de/assets/js/slider/text-media-slider.js

1/**
2 * Initialize slider.
3 * @module text-media-slider
4 * @author [email protected]
5 */
6
7'use strict';
8
9import '../libs/swiper-bundle.min.js';
10import { arrayFromNodeList } from '../_utilities/array-from-node-list.js';
11import { getLanguage } from '../_utilities/getter/get-language.js';
12import { language } from '../_utilities/language/lang.js';
13
14const sliders = arrayFromNodeList(document.querySelectorAll('.js-text-media-slider'));
15const currentLanguage = getLanguage();
16let sliderIntersectionObserver;
17
18/**
19 * Initiates the module.
20 * @function init
21 * @public
22 */
23export default function init() {
24  if (sliders.length) {
25    _prepareMultipleSliders();
26  }
27}
28/**
29 * Loop through all text-media-sliders in order to create an data attribute
30 * used for initializing multiple sliders with distinct pagination ans navigation buttons.
31 * @function _prepareMultipleSliders
32 */
33function _prepareMultipleSliders () {
34  sliders.forEach((slider, index) => {
35    const slides = arrayFromNodeList(slider.querySelectorAll('.swiper-slide'));
36
37    // init slider if there are more than one slides
38    if (slides.length > 1) {
39      slider.closest('.swiper-container').dataset.sliderIndex = index; // add data attribute to closest container
40      slider.closest('.text-media__item').classList.add('text-media__item--swiper');
41
42      if (!sliderIntersectionObserver) {
43        if ('IntersectionObserver' in window) {
44          _initIntersectionObserver();
45        }
46      }
47      _initSwiper(index);
48    } else {
49      slider.closest('.swiper-container').classList.add('--single');
50    }
51  });
52}
53
54/**
55 * Initiates an IntersectionObserver to start/stop the autoplay on the observed sliders when they are entering the viewport.
56 * @function _initIntersectionObserver
57 * @private
58 */
59function _initIntersectionObserver() {
60  sliderIntersectionObserver = new IntersectionObserver( function(entries) {
61    entries.forEach(function(entry) {
62      if (entry.isIntersecting) {
63        if (!entry.target.swiper.autoplay.paused) {
64          // when not paused by the user via button
65          entry.target.swiper.autoplay.start();
66        }
67      } else {
68        entry.target.swiper.autoplay.stop();
69      }
70    });
71  }, {
72    threshold: 0.75
73  });
74}
75
76function _initSwiper(index) {
77  if ('IntersectionObserver' in window) {
78    sliderIntersectionObserver.observe(document.querySelector('[data-slider-index="' + index + '"] .js-text-media-slider'));
79  }
80
81  const swiper = new Swiper('[data-slider-index="' + index + '"] .js-text-media-slider', {
82    a11y: {
83      enabled: true,
84      prevSlideMessage: language[currentLanguage].slider.prevSlideMessage,
85      nextSlideMessage: language[currentLanguage].slider.nextSlideMessage,
86      paginationBulletMessage: language[currentLanguage].slider.paginationBulletMessage,
87      slideLabelMessage: language[currentLanguage].slider.slideLabelMessage,
88    },
89    keyboard: true,
90    centeredSlides: false,
91    navigation: {
92      nextEl: '[data-slider-index="' + index + '"] .text-media-slider__next',
93      prevEl: '[data-slider-index="' + index + '"] .text-media-slider__prev',
94    },
95    watchSlidesProgress: true,
96    preloadImages: false,
97    lazy: true,
98    slidesPerView: 1,
99    spaceBetween: 20,
100    pagination: {
101      el: '[data-slider-index="' + index + '"] .text-media-slider__pagination',
102      clickable: true,
103      type: 'bullets',
104    },
105    loop: false,
106    autoplay: {
107      delay: 5000,
108    },
109  });
110
111  const autoplayToggle = document.querySelector('[data-slider-index="' + index + '"] .text-media-slider__autoplay-toggle');
112  autoplayToggle.setAttribute('aria-label', language[currentLanguage].slider.pause);
113
114  autoplayToggle.addEventListener('click', function() {
115    if (swiper.autoplay.running) {
116      swiper.autoplay.pause(); // now paused by the user via button
117      autoplayToggle.setAttribute('aria-pressed', true);
118    } else {
119      swiper.autoplay.start();
120      autoplayToggle.setAttribute('aria-pressed', false);
121    }
122  });
123}