title: Why doesn't the number of the active slide change in Swiper JS in pagination with a fraction?
body: <p>I have an .image-slider__fraction block that I tried to set up to display the number of the active slide from the total number of slides, but for some reason in the javascript it gives me the error &quot;Uncaught ReferenceError: myImageSLider is not defined&quot;, but I don't understand why</p>
  <p>Site <a href="http://ilyin1ib.beget.tech/" rel="nofollow noreferrer">http://ilyin1ib.beget.tech/</a>
  Code <a href="https://jsfiddle.net/qav8z7f3/" rel="nofollow noreferrer">https://jsfiddle.net/qav8z7f3/</a></p>
  <p><a href="https://i.stack.imgur.com/dRH3i.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/dRH3i.jpg" alt="enter image description here" /></a></p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code> let mySliderAllSlides = document.querySelector('.image-slider__total');
      let mySliderCurrentSlide = document.querySelector('.image-slider__current');
  
      mySliderAllSlides.innerHTML = myImageSLider.slides.length;
  
      myImageSLider.on('slideChange',  function() {
          let currentSlide = ++myImageSLider.realIndex;
          mySliderCurrentSlide.innerHTML = currentSlide;
      });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="image-slider__fraction"&gt;
                          &lt;div class="image-slider__current"&gt;1&lt;/div&gt;
                          &lt;div class="image-slider__sepparator"&gt;/&lt;/div&gt;
                          &lt;div class="image-slider__total"&gt;1&lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>