After spending 2 days researching, I have been unable to find the information I need on a common feature found in many mobile apps and websites. So, I have decided to seek advice from someone else. The feature I am referring to is a "translator" navigation bar, although I'm not sure if that's the official name as web terms can be confusing. Essentially, it is a part of website or app navigation that indicates which section you are on by sliding a small colored bar as you swipe through content pages. This navigation bar can also change colors or fade in and out.
I am attempting to create a translator navigation bar slider that moves as I swipe to the next page of content, while also having the "active" navigation tab fade out as the next one fades in - similar to how the Facebook mobile app functions.
To better understand my goal, I have created a jsfiddle where the blue bar represents the translator bar starting at "Option1" and sliding based on the selected navigation. Additionally, I would like the text of the "Option1" navigation to start blue and gradually fade out to grey as "Option2" begins to fade in blue upon sliding. https://jsfiddle.net/t882j5s8/13/
var mySwiper = $('.swiper-container').swiper();
$('a[data-slide]').click(function(e) {
e.preventDefault();
mySwiper.slideTo($(this).data('slide'));
});
If anyone has experience with this feature, knowledge of Swiper or other APIs that offer this functionality, or knows how to implement it, I would greatly appreciate your help. Thank you for your time.