CODEWITHSUNDEEP
javascripthtmlglidejs
WTFranklin
WTFranklin

Reputation: 2568

How to get bullets to work properly in glidejs

I'm trying to use glidejs as the slider on a website, however I can't get the bullets to work properly. The bullets are at the bottom of the example on glidejs' website on this page: https://glidejs.com/docs/options/ On my site, the bullets show up, but clicking on them does not change the slide. I haven't found any documentation for options that need to be passed in the initialization of glidejs to make these work. As far as I can tell from the glidejs site, initializing glide should make this work automatically. Everything else I have done works as expected, such as having the slides change on a timer and also having the arrow navigation for next and previous slides. I have the init code in a file called glideInit.js that looks like this:

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);
}

Here is the html I have for the slider:

<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>

Upvotes: 2

Views: 9927

Answers (3)

Dukeatcoding
Dukeatcoding

Reputation: 1393

I stumpled upon the the same problem. I solved it by nesting the bullets within the track div.

See Example with parts of your Code

<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-glide-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>

Upvotes: 2

Tiago Matos
Tiago Matos

Reputation: 1716

It might be old but there is a typo in

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

Should be data-glide-elnot guide.

Upvotes: 5

WTFranklin
WTFranklin

Reputation: 2568

After taking a break from this problem and coming back to it, I stumbled on the specific method that does this in glide.js. Once a glide object is created, you can call

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

where <slide_number> is replaced by an integer, e.g. glide.go('=2')

Upvotes: 2

Related Questions