https://www.visitkarlskrona.se/themes/custom/visitbasic_flex/js/swipers/swiper11.container.js?tm6ivw

1(function (Drupal, drupalSettings) {
2  'use strict';
3
4  // Helper function to check if DOM is ready
5  function domReady(fn) {
6    if (document.readyState === 'loading') {
7      document.addEventListener('DOMContentLoaded', fn);
8    } else {
9      fn();
10    }
11  }
12
13  domReady(function () {
14    const carouselSwipers = document.querySelectorAll('.swiper-container.carousel-swiper');
15
16    carouselSwipers.forEach(function (element, index) {
17      let slidesPerView = element.dataset.slidesPerView ? (element.dataset.slidesPerView === 'auto' ? 'auto' : parseInt(element.dataset.slidesPerView)) : 1;
18      let autoPlay = element.dataset.slideAutoPlay ? parseInt(element.dataset.slideDuration) * 1000 : false; // If autoplay is on, use duration value
19      let paginationType = element.dataset.pagination ? element.dataset.pagination : 'bullets';
20      let spaceBetween = element.dataset.spaceBetween ? parseInt(element.dataset.spaceBetween, 10) : 0;
21      let dynamicBullets = element.dataset.dynamicBullets ? element.dataset.dynamicBullets : false;
22      let slideEffect = slidesPerView === 1 ? element.dataset.slideEffect || 'fade' : 'slide';
23      let slideSpeed = element.dataset.slideSpeed ? parseInt(element.dataset.slideSpeed) : 300; //Swiper default speed is 300ms (0.3s)
24
25
26      if (element.id) {
27        /** Hide interactional elements on autoplay when the content is inspirational (Not containing different information or call to actions on each slide) */
28        if (autoPlay && slideEffect === 'fade') {
29          document.getElementById(element.id).getElementsByClassName('swiper-button-prev')[0].style.display = 'none';
30          document.getElementById(element.id).getElementsByClassName('swiper-button-next')[0].style.display = 'none';
31          document.getElementById(element.id).getElementsByClassName('swiper-pagination')[0].style.display = 'none';
32          slideSpeed = slideSpeed == 300 ? 4000 : slideSpeed; //When speed not specified, set higher default transition speed for a smooth, calm feeling
33        }
34
35        /* Init a slideshow for each found item that has a unique ID */
36        let swiperInstance = new Swiper('#' + element.id, {
37          effect: slideEffect,
38          loop: element.dataset.slideLoop || false,
39          slidesPerView: slidesPerView,
40          spaceBetween: spaceBetween,
41          speed: slideSpeed,
42          autoplay: autoPlay ? { delay: autoPlay } : false,
43          watchOverflow: true,
44          pagination: {
45            el: '.swiper-pagination',
46            clickable: true,
47            type: paginationType,
48            dynamicBullets: dynamicBullets,
49            ...(paginationType === 'custom' && {
50              renderCustom: function (swiper, current, total) {
51                return current + ' / ' + total;
52              },
53            }),
54          },
55          navigation: {
56            nextEl: '.swiper-button-next',
57            prevEl: '.swiper-button-prev',
58          },
59          a11y: {
60            // containerMessage: "Carousel", // Enable if needed! // Message for screen readers for outer swiper container
61            // containerRole: "region", // Enable if needed! // Value of the "role" attribute to be set on the swiper container
62            containerRoleDescriptionMessage: 'carousel', // Message for screen readers describing the role of outer swiper container
63            // containerRoleDescriptionMessage: null, // Enable if needed! // Message for screen readers describing the role of outer swiper container
64            enabled: true,
65            firstSlideMessage: Drupal.t('This is the first slide'),
66            // id: null, // Enable if needed! // Value of id attribute to be set on swiper-wrapper. If null will be generated automatically
67            // itemRoleDescriptionMessage: "carousel slide", // Enable if needed! // Message for screen readers describing the role of slide element
68            lastSlideMessage: Drupal.t('This is the last slide'),
69            nextSlideMessage: Drupal.t('Next slide'),
70            // notificationClass: "swiper-notification",  // Enable if needed! // CSS class name of A11y notification
71            paginationBulletMessage: Drupal.t('Go to slide {{index}}'),
72            prevSlideMessage: Drupal.t('Previous slide'),
73            // scrollOnFocus: true,  // Enable if needed! // Enables scrolling to the slide that has been focused
74            slideLabelMessage: Drupal.t('Slide {{index}} of {{slidesLength}}'),
75            // slideRole: "group", // Enable if needed! // Value of swiper slide role attribute
76          },
77        });
78
79        let hasVideoInActiveSlide = function () {
80          let activeSlide = element.querySelector('.swiper-slide.swiper-slide-active');
81          return activeSlide && activeSlide.querySelector('video') ? activeSlide.querySelector('video') : null;
82        };
83
84        let videoElements = element.querySelectorAll('video');
85        if (autoPlay || videoElements.length > 0) {
86          let pauseButton = document.createElement('button');
87          pauseButton.className = 'slideshow-pause-button';

88          pauseButton.id = element.id + '_pause_button';
89          pauseButton.innerHTML = '<svg class="slideshow-pause-icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640">' +
90              '<path d="M176 128C167.2 128 160 135.2 160 144L160 496C160 504.8 167.2 512 176 512L240 512C248.8 512 256 504.8 256 496L256 144C256 135.2 248.8 128 240 128L176 128zM128 144C128 117.5 149.5 96 176 96L240 96C266.5 96 288 117.5 288 144L288 496C288 522.5 266.5 544 240 544L176 544C149.5 544 128 522.5 128 496L128 144zM400 128C391.2 128 384 135.2 384 144L384 496C384 504.8 391.2 512 400 512L464 512C472.8 512 480 504.8 480 496L480 144C480 135.2 472.8 128 464 128L400 128zM352 144C352 117.5 373.5 96 400 96L464 96C490.5 96 512 117.5 512 144L512 496C512 522.5 490.5 544 464 544L400 544C373.5 544 352 522.5 352 496L352 144z"/>' +
91              '</svg>' + '<span>' + Drupal.t('Pause') + '</span>';
92          element.appendChild(pauseButton);
93
94          let iconElement = pauseButton.querySelector('.slideshow-pause-icon');
95          iconElement.style.display = 'block';
96
97          pauseButton.addEventListener('click', function () {
98            let video = hasVideoInActiveSlide();
99            let isAutoplayRunning = swiperInstance.autoplay.running;
100            let icon = this.querySelector('.slideshow-pause-icon');
101
102            if (isAutoplayRunning || (video && !video.paused)) {
103              if (isAutoplayRunning) {
104                swiperInstance.autoplay.stop();
105              }
106              if (video && !video.paused) {
107                video.pause();
108              }
109              let spanElement = this.querySelector('span');
110              spanElement.textContent = Drupal.t('Play');
111              icon.innerHTML = '<path d="M147.6 101.6C135.5 108.8 128 121.9 128 136L128 504C128 518.1 135.5 531.2 147.6 538.4C159.7 545.6 174.8 545.9 187.2 539.1L523.2 355.1C536 348.1 544 334.6 544 320C544 305.4 536 291.9 523.2 284.9L187.2 100.9C174.8 94.1 159.8 94.4 147.6 101.6zM171.8 129L507.8 313C510.4 314.4 512 317.1 512 320C512 322.9 510.4 325.6 507.8 327L171.8 511C169.3 512.4 166.3 512.3 163.9 510.9C161.5 509.5 160 506.8 160 504L160 136C160 133.2 161.5 130.6 163.9 129.1C166.3 127.6 169.3 127.6 171.8 129z"/>';
112              icon.style.display = 'block';
113              this.classList.remove('is-playing');
114              this.classList.add('is-paused');
115            } else {
116              if (autoPlay) {
117                swiperInstance.autoplay.start();
118              }
119              if (video && video.paused) {
120                video.play();
121              }
122              let spanElement = this.querySelector('span');
123              spanElement.textContent = Drupal.t('Pause');
124              icon.innerHTML = '<path d="M176 128C167.2 128 160 135.2 160 144L160 496C160 504.8 167.2 512 176 512L240 512C248.8 512 256 504.8 256 496L256 144C256 135.2 248.8 128 240 128L176 128zM128 144C128 117.5 149.5 96 176 96L240 96C266.5 96 288 117.5 288 144L288 496C288 522.5 266.5 544 240 544L176 544C149.5 544 128 522.5 128 496L128 144zM400 128C391.2 128 384 135.2 384 144L384 496C384 504.8 391.2 512 400 512L464 512C472.8 512 480 504.8 480 496L480 144C480 135.2 472.8 128 464 128L400 128zM352 144C352 117.5 373.5 96 400 96L464 96C490.5 96 512 117.5 512 144L512 496C512 522.5 490.5 544 464 544L400 544C373.5 544 352 522.5 352 496L352 144z"/>';
125              icon.style.display = 'block';
126              this.classList.remove('is-paused');
127              this.classList.add('is-playing');
128            }
129          });
130        }
131      }
132    });
133  });
134})(Drupal, drupalSettings);