如何让子弹在 glidejs 中正常工作答案

【问题标题】：How to get bullets to work properly in glidejs如何让子弹在 glidejs 中正常工作
【发布时间】：2025-12-20 20:25:17
【问题描述】：

我正在尝试使用 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="<">&lt;</button>
            <button id="slideForward" class="glide__arrow glide__arrow--right" data-glide-dir=">">&gt;</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>

【问题讨论】：

我已经用react*.com/a/58560980/5124488实现了它

标签： javascript html glidejs

【解决方案1】：

从这个问题中解脱出来后，我偶然发现了 glide.js 中执行此操作的特定方法。创建滑翔对象后，您可以调用

glide.go('=<slide_number>');

其中<slide_number> 被一个整数替换，例如glide.go('=2')

【讨论】：

【解决方案2】：

它可能是旧的，但有一个错字

<div class="glide__bullets" data-guide-el="controls[nav]">

应该是data-glide-elnot 指导。

【讨论】：

【解决方案3】：

我偶然发现了同样的问题。我通过在 track div 中嵌套子弹来解决它。

查看包含部分代码的示例

<div id="slider" class="glide">
        <div class="glide__track" data-glide-el="track">
            <div class="glide__slides">
              ......
            </div>


        <div class="glide__arrows" data-glide-el="controls">
            <button id="slideBack" class="glide__arrow glide__arrow--left" data-glide-dir="<">&lt;</button>
            <button id="slideForward" class="glide__arrow glide__arrow--right" data-glide-dir=">">&gt;</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> <!-- Closing Tag of track -->
    </div>

【讨论】：