title: Swiper: fraction and bullet pagination for same container
body: <p>I have set up a Swiper slider that currently has an arrow navigation and a bullet pagination at the top.</p>
  <pre><code>var swiper = new Swiper('.swiper-container', {
    navigation: {
      nextEl: '.swiper-button-next',
      prevEl: '.swiper-button-prev',
    },
    slidesPerView: 'auto',
    spaceBetween: 30,
    speed: 300,
    effect: 'fade',
    fadeEffect: {
      crossFade: true
    },
    loop: true,
    pagination: {
      el: '.swiper-pagination',
      clickable: true,
    },
  });
  </code></pre>
  <p>I need to add another pagination at the bottom, this time a type <a href="https://swiperjs.com/api/#pagination" rel="nofollow noreferrer">fraction</a> (1 / 11, 2 / 11).</p>
  <pre><code>pagination: {
      el: '.swiper-pagination',
      type: 'fraction',
  }
  </code></pre>
  <p>I've tried following the answer <a href="https://stackoverflow.com/questions/53484867/how-to-add-multiple-pagination-on-a-single-swiper-slider">given here</a>, but that displays Slide 1, Slide 2, Slide 3 all the times instead of only in the relative slides.</p>
  <p>See here the <strong><a href="https://jsfiddle.net/45ye70p2/" rel="nofollow noreferrer">JSFiddle</a></strong> of my current slider.</p>