title: Replacing Swiper pagination with text from html
body: <p>Am having a hard time with my swiper pagination, i changed my pagination to text, the click event works well but the active class does not cycle through other pagination and auto play does not work too. but if i replace it with only (index + 1) every thing works well. Any help is appreciated.</p>
  
  <p><a href="https://i.stack.imgur.com/H3qOW.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/H3qOW.png" alt="image of what am doing"></a> </p>
  
  <pre><code>&lt;div class="swiper-pagination swiper-pagination-clickable swiper-pagination-
  bullets" style="background: #fff"&gt;
      &lt;div class="swiper-pagination-bullet swiper-pagination-bullet-active"&gt;
       &lt;div class=""&gt;1&lt;/div&gt;
       hello there you are
      &lt;/div&gt;
      &lt;div class="swiper-pagination-bullet"&gt;active not&lt;/div&gt;
      &lt;div class="swiper-pagination-bullet"&gt;active not&lt;/div&gt;
      &lt;div class="swiper-pagination-bullet "&gt;active not&lt;/div&gt;
  &lt;/div&gt;
  
  var swiper = new Swiper('.swiper1',{
  autoplay: {
      delay: 1000,
      disableOnInteraction: true,
    },
  disableDraggable: true,
  pagination: {
      el: '.swiper-pagination',
      clickable: true,
      renderBullet: function (index, className) {
        return '&lt;div class="' + className + '"&gt;' + (text) + (index + 1) + 
       '&lt;/div&gt;';
  
      },
    },
  loop: true
  });
  </code></pre>