翻訳者ナビゲーションバーをSwiper.jsに追加するにはどうすればよいですか？

Question

私は多くのモバイルアプリやウェブサイトで見られるおそらくかなり普及している機能に関するアドバイスや助けを求めています。しかし、私は2日間の研究費を費やしていて、私が探しているものを見つけることができないようです。私は他の人に尋ねるだけでいいと感じています。だから私はここにいる。私がする方法を学ぶために探している機能は、 "翻訳者"ナビゲーションバーです。私は多くのウェブ用語が混乱し混ざっているように見えるので、この機能の正式な名前は分かりません。基本的には、ウェブサイトやモバイルアプリのナビゲーションの一部です。ナビゲーションのどの部分をトラッキングしているのですか。通常、次のページにスワイプするとスライドするいずれかの色の小さいバーが表示されます。バーと同様、ナビゲーション自体は色やフェードインやアウトなどを変更することができます。

理想的には、コンテンツの次のページにスワイプするときに移動するトランスレータのナビゲーションバースライダを作成しようとしています。同様に、いくつかの点で、現在のFacebookのモバイルアプリがどのように機能しているかについて、「アクティブな」ナビゲーションタブがフェードアウトするようにしてください。

私は理解しやすくするためにjsfiddleを持っています。青いバーは "Option1"で始まり、あなたがスライドしているnavを基準にしたスライドバーです。また、「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

まあ、それは私の望むものではありませんが、私が個人的に私が望むことをする方法を知っている唯一の方法です。私はまだ「スワイプの動き」の実際の計算に基づいて、これらの同じアクションを実行する方法を模索しています（それが意味をなさない場合）

私ができることは、あなたの指を画面に置くようにリアルタイムで更新するのではなく、「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')); 
});