title: How to get bullets to work properly in glidejs
body: <p>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: <a href="https://glidejs.com/docs/options/" rel="nofollow noreferrer">https://glidejs.com/docs/options/</a> 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:</p>
  
  <pre><code>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);
  }
  </code></pre>
  
  <p>Here is the html I have for the slider:</p>
  
  <pre><code>&lt;div id="slider" class="glide"&gt;
          &lt;div class="glide__track" data-glide-el="track"&gt;
              &lt;div class="glide__slides"&gt;
                  {% for entry in entries %}
                  {% set url = entry.slideBackgroundImage.first().getUrl() %}
  
                  &lt;div class="hero -homepage glide__slide"&gt;
                      &lt;div class="container"&gt;
                          &lt;h1 class="hero__title -homepage"&gt;&lt;a href="{{ entry.url }}" class="title-link"&gt;{{ entry.title }}&lt;/a&gt;&lt;/h1&gt;
  
                          &lt;div class="hero__row"&gt;
                              &lt;div class="override-redactor"&gt;
                                  &lt;a href="{{ entry.url }}"&gt;{{ entry.slideExcerpt }}&lt;/a&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
                  {% endfor %}
              &lt;/div&gt;
          &lt;/div&gt;
  
          &lt;div class="glide__arrows" data-glide-el="controls"&gt;
              &lt;button id="slideBack" class="glide__arrow glide__arrow--left" data-glide-dir="&lt;"&gt;&amp;lt;&lt;/button&gt;
              &lt;button id="slideForward" class="glide__arrow glide__arrow--right" data-glide-dir="&gt;"&gt;&amp;gt;&lt;/button&gt;
          &lt;/div&gt;
          &lt;div class="glide__bullets" data-guide-el="controls[nav]"&gt;
              &lt;button class="glide__bullet" data-glide-dir="=0"&gt;&lt;/button&gt;
              &lt;button class="glide__bullet" data-glide-dir="=1"&gt;&lt;/button&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  </code></pre>