Styjun

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>

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