Скрытие Раздел/Скользящие Стрелки на страницах - Fullpage.js

Question

Я работаю на веб-сайте с помощью fullpage.js: https://github.com/alvarotrigo/fullPage.js/

Первая проблема у меня в том, что мне нужно, чтобы скрыть стрелки, как только он попадает в последний раздел и/или слайд. то есть. если вы находитесь на крайнем правом слайде, я надеюсь, что это скроет правильную стрелку. Верхняя часть, стрелка вверх скрыта и т. Д.

Я пробовал совсем немного, чтобы заставить его работать, я все еще изучаю javascript, так что простите меня, если я уйду, но я надеялся, что это будет близко:

function hideArrowUp() { 
     if(index == 1){ 
      $('.arrowUp').hide(); 
     } 
     else { 
      $('.arrowUp').show(); 
     } 
    } 

    function hideArrowDown(anchorlink) { 
     if(index == 3){ 
      $('.arrowDown').hide(); 
     } 
     else { 
      $('.arrowDown').show(); 
     } 
    } 

И я надеялся предотвратить повторение/перемещение горизонтальных слайдов, не уверен, что это легко.

Просьба и спасибо!

Answer 1

Просто используйте обратные вызовы плагинов, такие как afterLoad или onLeave, чтобы удалить стрелку с помощью javascript или добавив класс.

Вы также можете использовать класс типа fp-viewing-xxxx, добавленный к вашему элементу тела, чтобы применить тот или иной стиль.

Взгляните на demo page of fullpage.js. В этом случае вы можете проверить DOM и посмотреть, как body получает класс fp-viewing-4thpage, применяемый при достижении последнего раздела. Это потому, что он использует якорь 4thpage, как вы можете видеть в URL-адресе (# 4-я страница).

Таким образом, вы можете сделать что-то вроде следующего в вашем CSS стилей:

.fp-viewing-4thpage .myArrow{ 
    display:none; 
} 

Помните демонстрационной страницы и многие другие примеры доступны in the downloaded files.

Answer 2

Теперь вы можете с javascript параметры.

Когда вы вызываете функцию полной страницы на div. Просто установите стрелку управления опцией в значение false.

//call full page function with options. 
$('#fullpage').fullpage({ 
     anchors:['anchor-1','anchor-2'], 
     controlArrows: false, 
     }); 

С уважением Alex