Swiper: fraction and bullet pagination for same container

I have set up a Swiper slider that currently has an arrow navigation and a bullet pagination at the top.

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,
  },
});

I need to add another pagination at the bottom, this time a type fraction (1 / 11, 2 / 11).

pagination: {
    el: '.swiper-pagination',
    type: 'fraction',
}

I've tried following the answer given here, but that displays Slide 1, Slide 2, Slide 3 all the times instead of only in the relative slides.

See here the JSFiddle of my current slider.