1/* global Glide */ 2window.addEventListener('load', function () { 3 4 let selector = '.carrousel-combo'; 5 const carrousels = [...document.querySelectorAll(selector)]; 6 7 carrousels.forEach(carrousel => { 8 if (carrousel.classList.contains("glide")) { 9 let perView = 1; 10 let elementMinimalWidth = carrousel.dataset.elementWidth; 11 if (typeof elementMinimalWidth !== 'undefined') { 12 let offsetWidth = carrousel.offsetWidth; 13 perView = Math.floor(offsetWidth / elementMinimalWidth); 14 perView += 0.5; // mobile to show that there is elements 15 } 16 let glide = new Glide(carrousel, { 17 type: 'carousel', 18 perView: perView 19 }); 20 glide.mount(); 21 /** 22 * To be able to set percentage height value on the child elements. 23 */ 24 let glideSlideElement = carrousel.querySelector(".glide__slides"); 25 glideSlideElement.style.height = `${glideSlideElement.offsetHeight}px`; 26 } else { 27 // we can't set the height of the container to have same height component 28 // because this is a grid and in small mobile screen, the height would be double 29 [...carrousel.childNodes].forEach(child => { 30 if (child.nodeType === Node.ELEMENT_NODE) { 31 // wrap it in a col 32 child.classList.remove("glide__slide") 33 let cellElement = document.createElement("div"); 34 cellElement.classList.add("col", "col-12", "col-sm-6", "col-md-4"); 35 cellElement.appendChild(child); 36 carrousel.appendChild(cellElement); 37 } 38 }); 39 } 40 41 }); 42 43}); 44