Javascript 如何将转换器导航栏添加到Swiper.js？

我正在就一个可能相当流行的功能寻求建议/帮助，该功能在许多移动应用程序和网站中都可以看到。然而，我花了两天的时间研究，似乎找不到我要找的东西。我觉得只要问问别人就好了。我来了。我想学习的功能是一个“translator”导航栏。我不知道这个功能的正式名称，因为很多网络术语似乎变得杂乱无章。基本上，它是网站或移动应用程序导航的一部分。它跟踪你在导航的哪一部分，通常是一个小的颜色条，当你滑动到下一页内容时滑动。与工具栏类似，导航本身可以更改颜色或淡入淡出等

理想情况下，当我滑动到下一页内容时，我会尝试创建翻译器导航栏滑块，并在下一个Nagiviation项目淡入时使“活动”导航选项卡淡出。在某些方面与当前facebook移动应用程序的功能类似

我有一个JSFIDLE来帮助更好地理解，蓝色条是翻译条，它将从“Option1”开始，并根据您滑动的导航进行滑动。此外，理想情况下，“Option1”导航文本将以蓝色开始，并慢慢淡出为灰色，因为在幻灯片上Option2将开始淡入为蓝色

---

我想如果有人有这个功能的专业知识，或者知道Swiper，或者其他有这个功能的API，或者知道如何实现它。我们将不胜感激。谢谢你的时间。

好的。。这并不完全是我想要的，但这是我个人知道如何做我想要的事情的唯一方式。我仍然在寻找一种方法，根据“我的刷卡移动”的实际计算来执行这些相同的操作（如果有意义的话？）

在没有任何人帮助的情况下，我所能做的最好的事情就是根据“startSlide”之类的事件进行转换，而不是在你把手指放在屏幕上时让它实时更新

不管怎么说，这是JFIDLE供有兴趣这样做的人使用。我仍然对其他答案持开放态度，这些答案可以帮助我学习基于动作的方法

---

嗯。。这并不完全是我想要的，但这是我个人知道如何做我想要的事情的唯一方式。我仍然在寻找一种方法，根据“我的刷卡移动”的实际计算来执行这些相同的操作（如果有意义的话？）

在没有任何人帮助的情况下，我所能做的最好的事情就是根据“startSlide”之类的事件进行转换，而不是在你把手指放在屏幕上时让它实时更新

不管怎么说，这是JFIDLE供有兴趣这样做的人使用。我仍然对其他答案持开放态度，这些答案可以帮助我学习基于动作的方法

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

var mySwiper = $('.swiper-container').swiper({
  onSlideChangeStart: function(swiper) {
    switch (mySwiper.activeIndex) {
      case 0:
        $("#one").css("color", "#4B93D3");
        $("#two").css("color", "#888888");
        $("#three").css("color", "#888888");
        $("#four").css("color", "#888888");
        $("#translator").css("transform", "translateX(0%)");
        break;

      case 1:
        $("#one").css("color", "#888888");
        $("#two").css("color", "#4B93D3");
        $("#three").css("color", "#888888");
        $("#four").css("color", "#888888");
        $("#translator").css("transform", "translateX(100%)");
        break;

      case 2:
        $("#one").css("color", "#888888");
        $("#two").css("color", "#888888");
        $("#three").css("color", "#4B93D3");
        $("#four").css("color", "#888888");
        $("#translator").css("transform", "translateX(200%)");
        break;

      case 3:
        $("#one").css("color", "#888888");
        $("#two").css("color", "#888888");
        $("#three").css("color", "#888888");
        $("#four").css("color", "#4B93D3");
        $("#translator").css("transform", "translateX(300%)");
        break;
    }
  }
})

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