Как добавить навигационную панель транслятора в Swiper.js?

Question

Я ищу совет или помощь по возможно довольно популярной функции, которая просматривается во многих мобильных приложениях и веб-сайтах. Тем не менее, я провел 2 дня исследования и не могу найти то, что я ищу. Я чувствую, что лучше, если я просто спрошу кого-то другого. И вот я здесь. Функция, которую я ищу, чтобы научиться делать, - это панель навигации «переводчик». Я не знаю официального названия этой функции, так как многие веб-термины, похоже, смешиваются и смешиваются. В основном это часть навигации для веб-сайта или мобильного приложения. Он отслеживает, в какой части навигации вы находитесь, как правило, с небольшой полосой любого цвета, сдвигаясь, когда вы садитесь на следующую страницу содержимого. Как и в случае с панелью, сама навигация может изменять цвета или исчезать и т. Д.

В идеале, я пытаюсь создать слайдер навигационной панели транслятора для слайдов при прокрутке на следующую страницу содержимого, а также есть «активная» вкладка навигации, исчезает, так как следующий элемент nagivation исчезает. Аналогично, каким-то образом, как работает текущее мобильное приложение 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

Ну .. Это не совсем то, что я хотел, но это единственный способ, которым я лично знаю, как делать то, что я хотел. Я все еще ищу способ сделать эти же действия, основываясь на фактических расчетах «движения моих ударов» (если это имеет смысл?)

Лучшее, что я мог обойтись без помощи, - это просто основывание преобразований на событиях типа " 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')); 
});