https://www.hotellimora.se/themes/custom/visitbasic_flex/js/swipers/swiper11.content.list.js?tlv2ut

1(function (Drupal) {
2  "use strict";
3
4  // Add a small delay with DOMContentLoaded to ensure everything is fully ready
5  document.addEventListener('DOMContentLoaded', function() {
6    setTimeout(function() {
7      initializeSwiper();
8    }, 50); // Small delay to ensure CSS is applied
9  });
10
11  function initializeSwiper() {
12    /* Create a slideshow for content lists that has slideshow active */
13    const contentListSlideshows = document.querySelectorAll(".content-list-as-slideshow");
14    if (contentListSlideshows.length) {
15      contentListSlideshows.forEach(function (value, sliderInit) {
16
17        let slidePerView = value.dataset.slidesPerRow;
18        let slidePerColumn = value.dataset.slidesPerColumn;
19        let slidePerViewTablet = value.dataset.tabletSlidesPerRow ? value.dataset.tabletSlidesPerRow : value.dataset.slidesPerRow;
20        let slidePerViewMobile = value.dataset.mobileSlidesPerRow ? value.dataset.mobileSlidesPerRow : 1;
21        let spaceBetweenItems = value.dataset.spaceBetween ? parseInt(value.dataset.spaceBetween, 10) : 30;
22        let spaceBetweenMobile = value.dataset.mobileSpaceBetween ? parseInt(value.dataset.mobileSpaceBetween, 10) : spaceBetweenItems;
23        let loop = value.dataset.slideLoop ? (value.dataset.slideLoop.toLowerCase() === 'true') : false; // check if true - otherwise false
24        let autoPlay = value.dataset.slideAutoPlay ? (value.dataset.slideDuration ? parseInt(value.dataset.slideDuration) * 1000 : 2500) : false; // If autoplay is on, use duration value else 2.5s default
25
26        if (autoPlay && loop === false) {
27          loop = true;
28        }
29
30        /* Init a slideshow for each found item */
31        sliderInit = new Swiper("#" + value.id, {
32          autoplay: autoPlay ? { delay: autoPlay, disableOnInteraction: false, stopOnLastSlide: false } : false,
33          loop: loop,
34          slidesPerView: slidePerViewMobile || 1,
35          slidesPerColumn: slidePerColumn || 1,
36          spaceBetween: spaceBetweenMobile,
37          watchOverflow: true,
38          breakpoints: {
39            576: {
40              slidesPerView: slidePerView == 'auto' ? slidePerView : Math.min(slidePerViewTablet, 2),
41              spaceBetween: spaceBetweenItems,
42              slidesPerColumn: slidePerColumn || 1,
43            },
44            768: {
45              slidesPerView: slidePerView == 'auto' ? slidePerView : Math.min(slidePerView, 3),
46              spaceBetween: spaceBetweenItems,
47              slidesPerColumn: slidePerColumn || 1,
48            },
49            1024: {
50              slidesPerView: slidePerView == 'auto' ? slidePerView : slidePerView || 3,
51              spaceBetween: spaceBetweenItems,
52              slidesPerColumn: slidePerColumn || 1,
53            },
54          },
55          pagination: {
56            el: ".swiper-pagination",
57            clickable: true,
58            dynamicBullets: true,
59          },
60          navigation: {
61            nextEl: ".swiper-button-next",
62            prevEl: ".swiper-button-prev",
63          },
64          a11y: {
65            // containerMessage: "Carousel", // Enable if needed! // Message for screen readers for outer swiper container
66            // containerRole: "region", // Enable if needed! // Value of the "role" attribute to be set on the swiper container
67            containerRoleDescriptionMessage: 'carousel', // Message for screen readers describing the role of outer swiper container
68            // containerRoleDescriptionMessage: null, // Enable if needed! // Message for screen readers describing the role of outer swiper container
69            enabled: true,
70            firstSlideMessage: Drupal.t('This is the first slide'),
71            // id: null, // Enable if needed! // Value of id attribute to be set on swiper-wrapper. If null will be generated automatically
72            // itemRoleDescriptionMessage: "carousel slide", // Enable if needed! // Message for screen readers describing the role of slide element
73            lastSlideMessage: Drupal.t('This is the last slide'),
74            nextSlideMessage: Drupal.t('Next slide'),
75            // notificationClass: "swiper-notification",  // Enable if needed! // CSS class name of A11y notification
76            paginationBulletMessage: Drupal.t('Go to slide {{index}}'),
77            prevSlideMessage: Drupal.t('Previous slide'),
78            // scrollOnFocus: true,  // Enable if needed! // Enables scrolling to the slide that has been focused
79            slideLabelMessage: Drupal.t('Slide {{index}} of {{slidesLength}}'),
80            // slideRole: "group", // Enable if needed! // Value of swiper slide role attribute
81          }
82        });
83
84        // Add autoplay control if autoplay is enabled
85        if (autoPlay && sliderInit) {
86          // Store autoplay state on the DOM element
87          value.isAutoplayPaused = false;

88          addAutoplayControl(value, sliderInit);
89        }
90      });
91    }
92  }
93
94  function addAutoplayControl(swiperEl, swiperInstance) {
95    // Create pause/play button
96    const controlButton = document.createElement('button');
97    controlButton.className = 'btn btn-primary swiper-autoplay-control-btn';
98    controlButton.setAttribute('aria-label', Drupal.t('Pause slideshow'));
99    controlButton.innerHTML = '<span class="sr-only">' + Drupal.t('Pause slideshow') + '</span><svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor"><path d="M6 19h4V5H6v14zm8-14v14h4V5h-4z"/></svg>';
100
101    // Find pagination element to position button next to it
102    const paginationEl = swiperEl.querySelector('.swiper-pagination');
103    let buttonPosition = 'right: 15px;';
104
105    if (paginationEl) {
106      // Position button to the right of pagination
107      buttonPosition = 'left: calc(50% + 70px);';
108    }
109
110    controlButton.style.cssText = `
111      ${buttonPosition}
112    `;
113    controlButton.addEventListener('click', function() {
114      toggleAutoplay(swiperEl, swiperInstance);
115    });
116
117    // Append to swiper container
118    swiperEl.appendChild(controlButton);
119    swiperEl.controlButton = controlButton;
120  }
121
122  function toggleAutoplay(swiperEl, swiperInstance) {
123    if (!swiperInstance) {
124      return;
125    }
126
127    if (swiperEl.isAutoplayPaused) {
128      swiperInstance.autoplay.start();
129      swiperEl.isAutoplayPaused = false;
130      updateAutoplayButton(swiperEl);
131    } else {
132      swiperInstance.autoplay.stop();
133      swiperEl.isAutoplayPaused = true;
134      updateAutoplayButton(swiperEl);
135    }
136  }
137
138  function updateAutoplayButton(swiperEl) {
139    if (!swiperEl.controlButton) {
140      return;
141    }
142
143    if (swiperEl.isAutoplayPaused) {
144      swiperEl.controlButton.setAttribute('aria-label', Drupal.t('Play slideshow'));
145      swiperEl.controlButton.innerHTML = '<span class="sr-only">' + Drupal.t('Play slideshow') + '</span><svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor"><path d="M8 5v14l11-7z"/></svg>';
146    } else {
147      swiperEl.controlButton.setAttribute('aria-label', Drupal.t('Pause slideshow'));
148      swiperEl.controlButton.innerHTML = '<span class="sr-only">' + Drupal.t('Pause slideshow') + '</span><svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor"><path d="M6 19h4V5H6v14zm8-14v14h4V5h-4z"/></svg>';
149    }
150  }
151})(Drupal);