How do I add a translator nav bar to Swiper.js?

I am seeking advice/help on a probably fairly popular feature that is seen across many mobile apps and websites. However, I've spent 2 days researching and can't seem to find what I'm looking for. I feel it is better if I just ask someone else. So here I am. The feature I am looking to learn how to do is a "translator" navigation bar. I do not know the official name of this feature as a lot of web terms seems to get jumbled and mixed. Basically it is part of a navigation for a website or mobile app. It tracks what part of the navigation you are on, typically with a small bar of whichever color, sliding as you swipe to the next page of content. Similar to the bar, the Navigation itself can change colors or fade in and out, etc.

Ideally, I am trying to create the translator navigation bar slider to slide when I swipe to the next page of content, as well as have the "active" navigation tab fade out, as the next nagivation item fades in. Similar, in some ways to how the current facebook mobile app is functioning.

I have a jsfiddle to help understand better, the blue bar would be the translator bar which would start at "Option1" and slide based on which nav you were sliding too. Also, ideally the "Option1" navigation text would start blue, and slow fade out to grey as the Option2 would begin to fade in to blue on slide. https://jsfiddle.net/t882j5s8/13/

var mySwiper = $('.swiper-container').swiper();
$('a[data-slide]').click(function(e) {
  e.preventDefault();
  mySwiper.slideTo($(this).data('slide'));
});

I guess if anyone has expertise with this feature or knows of Swiper, or other API that has this functionality or knows how to implement it. It would be greatly appreciated. Thanks for your time.