javascript - 如何向 Swiper.js 添加翻译器导航栏？

Question

我正在就许多移动应用程序和网站上常见的一个可能相当流行的功能寻求建议/帮助。但是，我花了 2 天时间进行研究，似乎找不到我要找的东西。我觉得还是问别人比较好。所以我在这里。我希望学习如何做的功能是“翻译器”导航栏。我不知道此功能的正式名称，因为许多网络术语似乎困惑不堪。基本上它是网站或移动应用程序导航的一部分。它会跟踪您所在的导航部分，通常带有任何颜色的小条，在您滑动到下一页内容时滑动。和bar类似，Navigation本身可以变色或者淡入淡出等。

理想情况下，我正在尝试创建翻译器导航栏 slider ，以便在我滑动到下一页内容时滑动，并让“事件”导航选项卡淡出，因为下一个导航项淡入。类似的，在某些方面影响当前 Facebook 移动应用程序的运作方式。

我有一个 jsfiddle 可以帮助更好地理解，蓝色栏是翻译栏，它从“Option1”开始，并根据您正在滑动的导航栏进行滑动。此外，理想情况下，“Option1”导航文本将从蓝色开始，然后随着 Option2 在幻灯片上开始淡入蓝色而缓慢淡出为灰色。 https://jsfiddle.net/t882j5s8/13/

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

我猜是否有人精通此功能或知道 Swiper 或其他具有此功能或知道如何实现它的 API。这将不胜感激。感谢您的宝贵时间。

Answer 1

嗯.. 这不完全是我想要的，但这是我个人知道如何做我想做的唯一方法。我仍在寻找一种方法来根据“我的滑动 Action ”的实际计算来执行这些相同的操作(如果这有意义的话？)

在没有任何人帮助的情况下，我能做的最好的事情就是将转换基于诸如“startSlide”之类的事件，而不是让它在您将手指放在屏幕上时实时更新。

无论如何，对于任何有兴趣以这种方式进行操作的人来说，这是 JFiddle。我仍然对其他可以帮助我学习基于运动的方式的答案持开放态度。

https://jsfiddle.net/t882j5s8/20/

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