title: How to add Multiple pagination on a single Swiper Slider
body: <p>I would like to add two pagination for my swiper slider, something like attached image, one will hold text and another will be dot which comes by default in swiper slider. I tried some code but that did not work.</p>
  
  <p>Here is my code</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>    var menu = ['Slide 1', 'Slide 2', 'Slide 3']
      var swiper = new Swiper('.swiper-container', {
   pagination: {
    el: '.swiper-pagination',
     clickable: true,
          renderBullet: function (index, className) {
            return '&lt;span class="' + className + '"&gt;' + (menu[index]) + '&lt;/span&gt;';
          },
      },
   
        navigation: {
          nextEl: '.swiper-button-next',
          prevEl: '.swiper-button-prev',
        },
      });</code></pre>
  </div>
  </div>
  </p>
  
  <p><a href="https://i.stack.imgur.com/jipSa.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/jipSa.png" alt="enter image description here"></a></p>