Swiper.js에 번역기 탐색 모음을 추가하려면 어떻게합니까?

Question

많은 모바일 앱과 웹 사이트에서 볼 수있는 상당히 인기있는 기능에 대한 조언을 구하고 있습니다. 그러나, 나는 2 일을 연구하고 찾던 것을 찾을 수없는 것 같습니다. 나는 다른 사람에게 물으면 더 낫다고 느낍니다. 그래서 나는 여기있다. 내가하는 방법을 배우려는 기능은 "번역기"탐색 모음입니다. 많은 웹 용어가 뒤죽박죽이되어 혼합되어있는 것처럼이 기능의 공식 이름을 모르겠습니다. 기본적으로 웹 사이트 또는 모바일 앱의 탐색 부분입니다. 탐색중인 부분을 추적합니다. 대개 작은 색상의 막대를 사용하여 다음 페이지로 이동합니다. 막대와 마찬가지로 탐색 자체는 색상이나 페이드 인/아웃 등을 변경할 수 있습니다.

이상적으로는 콘텐츠의 다음 페이지로 스 와이프 할 때 번역기 탐색 모음 슬라이더를 만들려고합니다. 다음 활성화 항목이 페이드 인 할 때 "활성"탐색 탭이 페이드 아웃되도록하십시오. 비슷한 방법으로 현재 페이스 북 모바일 앱이 작동하는 방법에 대해 알아보십시오.

나는 더 잘 이해할 수 있도록 jsfiddle을 가지고 있는데, 파란색 막대는 "Option1"에서 시작하고 슬라이더가 어느 슬라이더에 있는지에 따라 슬라이드하는 변환기 막대가됩니다. 또한 이상적으로는 "Option1"탐색 텍스트가 파란색으로 시작되고 Option2가 슬라이드에서 파란색으로 페이드 인되기 시작하면서 회색으로 느리게 페이드 아웃됩니다. 누군가가이 기능을 사용하여 전문 지식이 있거나 Swiper, 또는이 기능이 있거나이를 구현하는 방법을 알고 다른 API를 알고 있다면 https://jsfiddle.net/t882j5s8/13/

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

는 것 같아요. 대단히 감사하겠습니다. 시간 내 줘서 고마워.

Answer 1

음 .. 정확히 내가 원했던 것은 아니지만, 개인적으로 내가 원하는 것을하는 방법을 알고있는 유일한 방법입니다. 나는 "스 와이프의 움직임"에 대한 실제 계산을 기반으로 이러한 동일한 작업을 수행하는 방법을 모색 중입니다. (맞는 말이 있다면?)

최선을 다해 도움을 줄 수있는 사람들은 " 손가락을 화면에 대고 실시간으로 업데이트하지 말고 시작 슬라이드를 시작하십시오.

어쨌든 여기에 관심이있는 사람들을위한 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')); 
});