Question

我正在寻求关于许多移动应用和网站上可能相当受欢迎的功能的建议/帮助。但是，我花了2天的时间研究，似乎无法找到我想要的东西。如果我问别人，我觉得更好。所以我在这里。我希望学习如何做的功能是＆＃34;翻译＆＃34;导航栏。我不知道这个功能的正式名称，因为许多网页术语似乎混杂不清。基本上它是网站或移动应用程序导航的一部分。它会跟踪您所在导航的哪个部分，通常使用一个小条，无论哪种颜色，当您滑动到下一页内容时滑动。与栏相似，导航本身可以改变颜色或淡入淡出等。

理想情况下，我正在尝试创建翻译器导航栏滑块，以便在我滑动到下一页内容时滑动，同时让＆＃34;活动＆＃34;导航选项卡淡出，因为下一个nagivation项目淡入。类似，在某些方面，当前的Facebook移动应用程序如何运作。

我有一个帮助理解更好的jsfiddle，蓝色栏将是翻译栏，它将从＆＃34; Option1＆＃34;并根据您正在滑动的导航进行滑动。此外，理想情况下，＆＃34;选项1＆＃34;当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

嗯..这不是我想要的，但这是我个人知道如何做我想要的唯一方式。我仍在寻找一种方法来根据我的滑动＆＃34;运动的实际计算来做同样的动作。（如果这有意义吗？）

我没有任何人可以做的最好的事情就是根据＆＃34; startSlide＆＃34;等事件进行变革。而不是让你的手指在屏幕上实时更新。

无论如何，对于任何有兴趣这样做的人来说，这里都是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'));
});

如何将翻译器导航栏添加到Swiper.js？

1 个答案: