Active class on nav (dots) not working when navigating to custom slide index

[garygreen]

Reproducable on: https://codepen.io/garygreen/pen/Owvmgr

If you click on the second dot, the bullet does not get the glide__bullet--active. However if you scroll through from the start it will get an active class.

It seems to be a problem if you are "jumping" ahead to a custom slide index. Would imagine it being a problem for the API too.

You also get an error in console:

Relating to these line: https://github.com/glidejs/glide/blob/32c7d4ee15188cd39c0bd142d1abdb421fa3ea1a/dist/glide.esm.js#L3142-L3153

[garygreen]

If this is intended, then it's a bit odd that the dots will allow you to navigate in any direction yet doesn't work out where about's you have navigated to in the slider relative to the number of dots available. That really should be mentioned in the docs if such a scenario is not supported.

In our case, we don't want each dot to represent a slide, but instead each dot should represent navigating to the next set of visible slides per view - so for example if we're showing 6 per view, we would like to jump in increments of 0, 6, 12, etc.

Possibly related to #241

[jedrzejchalubek]

Currently, glide does not support a grouped slides movement. Unfortunately, because of that, you have all of these problems.

I'm aware of that, we can do better here.

[shakyjake]

Chiming in with a workaround in case anyone else got here from googling:

Since addClass() uses the index of the active slide, you can get around this limitation by defining the bullets for every slide but hiding (e.g. with CSS) every unwanted nth bullet.

<div class="glide__bullets glide__bullets--featured" data-glide-el="controls[nav]">
    <button class="glide__bullet" data-glide-dir="=0"></button>
    <button class="glide__bullet" data-glide-dir="=1" style="display: none"></button>
    <button class="glide__bullet" data-glide-dir="=2" style="display: none"></button>
    <button class="glide__bullet" data-glide-dir="=3"></button>
    <button class="glide__bullet" data-glide-dir="=4" style="display: none"></button>
    <button class="glide__bullet" data-glide-dir="=5" style="display: none"></button>
</div>

[rakeshninja]

Chiming in with a workaround in case anyone else got here from googling:

Since addClass() uses the index of the active slide, you can get around this limitation by defining the bullets for every slide but hiding (e.g. with CSS) every unwanted nth bullet.

<div class="glide__bullets glide__bullets--featured" data-glide-el="controls[nav]">
    <button class="glide__bullet" data-glide-dir="=0"></button>
    <button class="glide__bullet" data-glide-dir="=1" style="display: none"></button>
    <button class="glide__bullet" data-glide-dir="=2" style="display: none"></button>
    <button class="glide__bullet" data-glide-dir="=3"></button>
    <button class="glide__bullet" data-glide-dir="=4" style="display: none"></button>
    <button class="glide__bullet" data-glide-dir="=5" style="display: none"></button>
</div>

This is Working ! Thanks