CODEWITHSUNDEEP
javascriptbootstrap-4glidejs
Fettabachi
Fettabachi

Reputation: 89

Why doesn't Glide.js work properly when used with a Bootstrap 4 modal?

I'm using Glide.js and a Bootstrap 4 modal on my team page to display the bio of the team member that was clicked on. This is accomplished by using getAttribute for the team member clicked on and using that as the startAt: index for glide.

This code works perfectly, the first time. However, if I close the modal and reopen it again by clicking on any team member, the modal still contains all of the html and the glide controls but all of the slides' inline styles have width:0; so no slides are displayed, the modal appears empty.

Also, the navigation dots don't work when clicked, even on the initial render.

import Glide from "@glidejs/glide";

class LeadershipSlider {
    constructor() {
        if (document.querySelector("#leadership-slider")) {
            // count how many slides there are
            const dotCount = document.querySelectorAll(".leadership-slider__slide").length;

            // Generate the 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,
            });

            // get 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();

            // Add the dots HTML to the DOM
            document.querySelector(".glide__bullets").insertAdjacentHTML("beforeend", dotHTML);
        }
    }
}

export default LeadershipSlider;

Upvotes: 0

Views: 989

Answers (2)

Hadrien
Hadrien

Reputation: 23

Make sure to initialize Glide once modal has been created. You can listen to shown.bs.modal modal event to setup Glide at the right moment.

document.getElementById('modal').on('shown.bs.modal', function () {
    new Glide('.carousel', {
        type: 'carousel',
    }).mount();
});

Upvotes: 0

ir3ne
ir3ne

Reputation: 59

I have the same issue including glide into a modal. After a lot of tests I think it depends from when the glide initialization it happens. In my case I have slide with width: 0 because the slider it is not initialized yet.

Hope this example I found can help you: https://github.com/glidejs/glide/issues/504

Upvotes: 0

Related Questions