我在我的团队页面上使用 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;