https://www.sweg.de/assets/js/slider/teaser-slider.js

1/**
2 * Load additional HTML Elements with AJAX.
3 * @module teaser-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-image-teaser-slider'));
15let swiperInitialized = false;
16const currentLanguage = getLanguage();
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 image-teaser-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 any slides
38    if (slides.length) {
39      slider.closest('.swiper-container').dataset.sliderIndex = index; // add data attribute to closest container
40      _initSwiper(index);
41    }
42  });
43}
44
45function _initSwiper(index) {
46  swiperInitialized = true;
47
48  const swiper = new Swiper('[data-slider-index="' + index + '"] .js-image-teaser-slider', {
49    a11y: {
50      enabled: true,
51      prevSlideMessage: language[currentLanguage].slider.multiplePrevSlidesMessage,
52      nextSlideMessage: language[currentLanguage].slider.multipleNextSlidesMessage,
53      paginationBulletMessage: language[currentLanguage].slider.multipleElementsPaginationBulletMessage,
54      slideLabelMessage: language[currentLanguage].slider.slideLabelMessage,
55    },
56    keyboard: true,
57    centeredSlides: false,
58    spaceBetween: 30,
59    navigation: {
60      nextEl: '[data-slider-index="' + index + '"] .image-teaser-slider__next',
61      prevEl: '[data-slider-index="' + index + '"] .image-teaser-slider__prev',
62    },
63    watchSlidesProgress: true,
64    preloadImages: false,
65    lazy: true,
66    slidesPerView: 1,
67    pagination: {
68      el: '[data-slider-index="' + index + '"] .image-teaser-slider__pagination',
69      clickable: true,
70      type: 'bullets',
71    },
72    breakpoints: {
73      320: {
74        slidesPerView: 1,
75      },
76      600: {
77        slidesPerView: 2,
78      },
79      900: {
80        slidesPerView: 3,
81      },
82      1280: {
83        slidesPerView: 4,
84      }
85    },
86    loop: false,
87  });
88
89  _bindSliderEvents(swiper, index);
90}
91
92function _bindSliderEvents(swiper, index) {
93  const teaserLinks = arrayFromNodeList(document.querySelectorAll('[data-slider-index="' + index + '"] .js-image-teaser-slider .swiper-slide .link'))
94
95  teaserLinks.forEach((teaserLink, teaserIndex) => {
96    // focus handling will only work without slidesPerGroup parameter, and not with swiper-slide-visible
97    teaserLink.addEventListener('focusin', function() {
98      let focusedSlide = teaserLink.closest('.swiper-slide');
99
100      if (!focusedSlide.classList.contains('swiper-slide-active')) {
101        swiper.slideTo(teaserIndex);
102      }
103    });
104  });
105}