我正在尝试使用 glidejs 作为网站上的滑块,但是我无法让项目符号正常工作。项目符号位于此页面上 glidejs 网站示例的底部:https ://glidejs.com/docs/options/在我的网站上,项目符号显示,但单击它们不会更改幻灯片。我还没有找到任何关于需要在 glidejs 的初始化中传递以使这些工作正常的选项的文档。据我从 glidejs 网站可以看出,初始化 glide 应该可以自动完成这项工作。我所做的所有其他事情都按预期工作,例如在计时器上更改幻灯片以及为下一张和上一张幻灯片设置箭头导航。我在一个名为 glideInit.js 的文件中有初始化代码,如下所示:
document.addEventListener("DOMContentLoaded", function() {
var glide = new Glide('#slider', {
type : 'carousel',
perView : 1,
focusAt : 'center',
breakpoints : {
800 : {
perView : 1
},
480 : {
perView : 1
}
},
autoplay: 5000
});
glide.mount();
});
function startTimer() {
setInterval(function() {
forward('slideForward');
}, 5000);
}
这是我为滑块准备的 html:
<div id="slider" class="glide">
<div class="glide__track" data-glide-el="track">
<div class="glide__slides">
{% for entry in entries %}
{% set url = entry.slideBackgroundImage.first().getUrl() %}
<div class="hero -homepage glide__slide">
<div class="container">
<h1 class="hero__title -homepage"><a href="{{ entry.url }}" class="title-link">{{ entry.title }}</a></h1>
<div class="hero__row">
<div class="override-redactor">
<a href="{{ entry.url }}">{{ entry.slideExcerpt }}</a>
</div>
</div>
</div>
</div>
{% endfor %}
</div>
</div>
<div class="glide__arrows" data-glide-el="controls">
<button id="slideBack" class="glide__arrow glide__arrow--left" data-glide-dir="<"><</button>
<button id="slideForward" class="glide__arrow glide__arrow--right" data-glide-dir=">">></button>
</div>
<div class="glide__bullets" data-guide-el="controls[nav]">
<button class="glide__bullet" data-glide-dir="=0"></button>
<button class="glide__bullet" data-glide-dir="=1"></button>
</div>
</div>