I'm currently utilizing Glide.js and a Bootstrap 4 modal on our team page to showcase the biography of the selected team member. This functionality is achieved by extracting the attribute of the clicked team member and using it as the startAt: index for glide.
The code executes flawlessly upon the first interaction. However, if I close the modal and reopen it by clicking on another team member, the modal retains all its HTML elements and glide controls, yet the inline styles of all slides have been set to width:0;, rendering the modal empty with no visible slides.
In addition, the navigation dots fail to function even on the initial load.
import Glide from "@glidejs/glide";
class LeadershipSlider {
constructor() {
if (document.querySelector("#leadership-slider")) {
// Determine the number of slides
const dotCount = document.querySelectorAll(".leadership-slider__slide").length;
// Generate HTML for the navigation dots
let dotHTML = "";
for (let i = 0; i < dotCount; i++) {
dotHTML += `<button class="slider__bullet glide__bullet" data-glide-dir="=${i}"></button>`;
}
var glide = new Glide("#leadership-slider", {
type: "carousel",
perView: 1,
gap: 0,
});
// Fetch data attribute for slide to startAt
let slides = document.querySelectorAll(".icon-biography-opt");
for (var i = 0; i < slides.length; i++) {
slides[i].addEventListener("click", function () {
var slideToStart = this.getAttribute("data-leader-index");
glide.update({
startAt: slideToStart,
});
});
}
glide.mount();
// Append the dots HTML to the DOM
document.querySelector(".glide__bullets").insertAdjacentHTML("beforeend", dotHTML);
}
}
}
export default LeadershipSlider;