https://www.sinaihealth.ca/themes/custom/sinai_health/js/gallery-slider.js?tlvi3s

1import Splide from '../node_modules/@splidejs/splide/dist/js/splide.esm.js';
2
3(function($, Drupal, drupalSettings){
4  'use strict';
5
6  Drupal.behaviors.gallerySlider = {
7  attach(context) {
8    const galleryParagraphs = context.querySelectorAll('.paragraph--type--video-or-image-gallery');
9
10    if (galleryParagraphs.length) {
11      galleryParagraphs.forEach((galleryParagraph) => {
12        const gallerySlider = galleryParagraph.querySelector('[data-slider="gallery-slider"]');
13        const slides = gallerySlider.querySelectorAll('.splide__slide');
14        const thumbnails = galleryParagraph.querySelector('[data-slider="gallery-thumbnail-slider"]');
15
16        const thumbnailSlides = thumbnails.querySelectorAll('.splide__slide');
17        thumbnailSlides.forEach((slide) => {
18          const iframe = slide.querySelector('iframe');
19
20          if (iframe) {
21            let src = iframe.getAttribute('src');
22            src += '&controls=0&rel=0';
23            iframe.setAttribute('src', src);
24          }
25        });
26
27        const mainSlider = new Splide(gallerySlider, {
28          type: 'loop',
29          perPage: 1,
30          width: '100%',
31          pagination: false,
32        });
33
34        const thumbnailSlider = new Splide(thumbnails, {
35          perPage: 6,
36          gap: '1.5rem',
37          rewind: true,
38          pagination: false,
39          cover: true,
40          isNavigation: true,
41          arrows: false,
42        });
43
44        mainSlider.on('moved', (newIndex, prevIndex) => {
45          const activeSlide = gallerySlider.querySelector('.active-index');
46          activeSlide.textContent = newIndex + 1; // The variable starts with 0.
47
48          if (slides.length) {
49            let prevVideoSlide = slides[prevIndex].querySelector('video');
50
51            if (prevVideoSlide) {
52              prevVideoSlide.pause();
53            } else if (slides[prevIndex].querySelector('iframe')) {
54
55              // Pause Iframe video by reloading it.
56              const prevIframeSlide = slides[prevIndex].querySelector('iframe');
57              let src = prevIframeSlide.getAttribute('src');
58              if (src.indexOf('autoplay=0') !== -1) {
59                prevIframeSlide.setAttribute('src', src.concat('&autoplay=0'));
60              } else {
61                prevIframeSlide.setAttribute('src', src.replace('&autoplay=0', '&autoplay=0'));
62              }
63
64            }
65          }
66        });
67
68        mainSlider.sync(thumbnailSlider);
69        mainSlider.mount();
70        thumbnailSlider.mount()
71      });
72    }
73
74  },
75};
76
77})(jQuery, Drupal, drupalSettings);