javascript - 为什么 Glide.js 在与 Bootstrap 4 模态一起使用时不能正常工作?
问题描述
我在我的团队页面上使用 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;
解决方案
推荐阅读
- java - 使用 WSDL2Java 时添加默认值(不修改模式)?
- c# - 根据特定单元格中的数据组合数据表中的行
- python - 显示隐藏小部件后如何将所有内容保持在正确位置?
- mongodb - 如何在下一个 js 应用程序的客户端显示猫鼬模式验证错误消息?
- java - 在 jgit 中使用 RevWalk 的 parseCommit 方法得到 NullPointerException
- node.js - 根据 _id 更新子数组中的所有元素
- python - 即使字符串模式匹配,re.match 也会返回 false
- angular - 如何在模板驱动的表单中以角度添加空格验证
- android - 评估根项目“audioplayers”时出现问题。在 Flutter 项目中应用插件 [id 'kotlin-android'] 失败
- javascript - 对 CRUD 应用程序更新的理解