https://veterans.gc.ca/themes/custom/vac/js/glide/glide-init.js?v=1.x

1(function (Drupal) {
2  Drupal.behaviors.glideSlider = {
3    attach: function (context) {
4      once('glide', '.glide', context).forEach((slider) => {
5        let baseConfig = {};
6
7        // --- Detect mode ---
8        if (slider.classList.contains('glide-banner')) {
9          // Banner: always 1 per view, no breakpoints
10          baseConfig = {
11            type: 'slider',
12            rewind: false,
13            perView: 1,
14            breakpoints: {} // prevent overrides
15          };
16        } else if (slider.classList.contains('glide-carousel')) {
17          // Carousel: responsive breakpoints
18          baseConfig = {
19            type: 'carousel',
20            rewind: true,
21            perView: 1,
22            breakpoints: {}
23          };
24        }
25
26        initGlideJsSlider(slider, baseConfig);
27      });
28    }
29  };
30
31  /**
32   * Core initializer
33   */
34  function initGlideJsSlider(slider, baseConfig) {
35    const config = Object.assign({
36      type: 'slider',
37      rewind: false,
38      bound: true,
39      perView: 1
40    }, baseConfig || {});
41
42    // --- PerView override via class (glide-3, glide-4, etc.) ---
43    const perViewMatch = slider.className.match(/glide-(\d+)/);
44    if (perViewMatch && perViewMatch[1]) {
45      config.perView = parseInt(perViewMatch[1]);
46      if (config.breakpoints) {
47        for (const bpKey in config.breakpoints) {
48          config.breakpoints[bpKey].perView = Math.min(config.breakpoints[bpKey].perView, config.perView);
49        }
50      }
51    }
52
53    const glideInstance = new Glide(slider, config);
54
55    removeGlideJsSliderControls(slider);
56    initGlideJsSliderControls(glideInstance, slider);
57
58    glideInstance.on(['mount.after', 'resize', 'move.after'], function () {
59      checkArrowsState(this, glideInstance, slider);
60    }, { passive: true });
61
62    glideInstance.on('resize', function () {
63      checkControlsState(glideInstance, config, slider, true);
64    }, { passive: true });
65
66    glideInstance.mount();
67  }
68
69  // --- Controls + Helpers ---
70  function initGlideJsSliderControls(options, slider) {
71    const numItems = slider.querySelectorAll('li.glide__slide').length;
72    const numItemsPerSlide = options._o.perView;
73    const numDots = numItems - numItemsPerSlide + 1;
74    if (numDots > 1) {
75      addGlideJsSliderControls(slider, numDots);
76    }
77  }
78
79  function removeGlideJsSliderControls(slider) {
80    slider.querySelectorAll('.glide__arrows, .glide__bullets').forEach(el => el.remove());
81  }
82
83  function addGlideJsSliderControls(slider, numDots) {
84    try {
85      const controlsContainer = document.createElement('div');
86      controlsContainer.classList.add('glide__arrows');
87      controlsContainer.setAttribute('data-glide-el', 'controls');
88      controlsContainer.innerHTML = `
89        <a tabindex="0" role="button" class="glide__arrow glide__arrow--left slider__arrow" data-glide-dir="<">
90          <svg fill-opacity="0.5" xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24">
91            <path d="M0 12l10.975 11 2.848-2.828-6.176-6.176H24v-3.992H7.646l6.176-6.176L10.975 1 0 12z"></path>
92          </svg>
93        </a>
94        <a tabindex="0" role="button" class="glide__arrow glide__arrow--right slider__arrow" data-glide-dir=">">
95          <svg fill-opacity="0.5" xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24">
96            <path d="M13.025 1l-2.847 2.828 6.176 6.176h-16.354v3.992h16.354l-6.176 6.176 2.847 2.828 10.975-11z"></path>
97          </svg>
98        </a>`;
99      slider.appendChild(controlsContainer);
100
101      const bulletsContainer = document.createElement('div');
102      bulletsContainer.classList.add('glide__bullets', 'slider__bullets');
103      bulletsContainer.setAttribute('data-glide-el', 'controls[nav]');
104      slider.appendChild(bulletsContainer);
105
106      for (let i = 0; i < numDots; i++) {
107        const bullet = document.createElement('a');
108        bullet.setAttribute('tabindex', '0');
109        bullet.setAttribute('role', 'button');
110        bullet.classList.add('slider__bullet', 'glide__bullet');
111        bullet.setAttribute('data-glide-dir', `=${i}`);
112        bulletsContainer.appendChild(bullet);
113      }
114    } catch (e) {
115      console.error(e);
116    }
117  }
118
119  function checkArrowsState(glide, options, slider) {
120    const compnt = options._c.Run;
121    const leftArrow = slider.querySelector('.glide__arrow--left');
122    const rightArrow = slider.querySelector('.glide__arrow--right');
123    if (leftArrow) {
124      if (compnt.isStart()) {
125        leftArrow.classList.add('slider__arrow--disabled');
126      } else {
127        leftArrow.classList.remove('slider__arrow--disabled');
128      }
129    }
130    if (rightArrow) {
131      if (compnt.isEnd()) {
132        rightArrow.classList.add('slider__arrow--disabled');
133      } else {
134        rightArrow.classList.remove('slider__arrow--disabled');
135      }
136    }
137  }
138
139  function checkControlsState(oldOptions, config, slider, forceIt) {
140    if (oldOptions._o.perView !== config.perView || forceIt) {

141      removeGlideJsSliderControls(slider);
142      initGlideJsSliderControls(oldOptions, slider);
143      oldOptions.destroy();
144      const updatedGlideOptions = new Glide(slider, config);
145      updatedGlideOptions.on(['mount.after', 'resize', 'move.after'], function () {
146        checkArrowsState(this, updatedGlideOptions, slider);
147      });
148      updatedGlideOptions.on('resize', function () {
149        checkControlsState(updatedGlideOptions, config, slider, true);
150      });
151      updatedGlideOptions.mount();
152    }
153  }
154})(Drupal);