为什么 Glide.js 在与 Bootstrap 4 模态一起使用时不能正常工作？答案

【问题标题】：Why doesn't Glide.js work properly when used with a Bootstrap 4 modal?为什么 Glide.js 在与 Bootstrap 4 模态一起使用时不能正常工作？
【发布时间】：2021-07-30 16:57:31
【问题描述】：

我在我的团队页面上使用 Glide.js 和 Bootstrap 4 模式来显示被点击的团队成员的简历。这是通过对单击的团队成员使用 getAttribute 并将其用作滑行的 startAt: index 来完成的。

此代码第一次完美运行。但是，如果我关闭模态并通过单击任何团队成员再次重新打开它，模态仍然包含所有 html 和滑行控件，但所有幻灯片的内联样式都有 width:0; 所以没有幻灯片显示，模态显示为空。

此外，导航点在单击时不起作用，即使在初始渲染时也是如此。

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;

【问题讨论】：

标签： javascript bootstrap-4 glidejs

【解决方案1】：

我有同样的问题，包括滑入模态。经过大量测试后，我认为这取决于滑翔初始化发生的时间。在我的情况下，我使用 width: 0 滑动，因为它尚未初始化的滑块。

希望我找到的这个例子可以帮助你： https://github.com/glidejs/glide/issues/504

【讨论】：