#javascript #jquery #slideshow #counter #fullpage.js
#javascript #jquery #слайд-шоу #счетчик #fullpage.js
Вопрос:
Я пытаюсь получить
current slide / total slides
на Fullpage.js и обновлять текущий слайд при каждом изменении слайда.
Я абсолютный новичок в Javascript и пытаюсь обойти этот код. Цифры отображаются, но они не обновляют каждое изменение слайда.
$(function() {
var sections = $('.section');
updateCurrentIndex(); //on document.ready and on each slidechange
function updateCurrentIndex() {
sections.each(function() {
var section = $(this),
sectionSlides = section.find('.slide'),
totalItems = sectionSlides.length,
currentIndex = sectionSlides.filter('.active').index() 1,
numContainer = section.find('.num'); //assuming you have numContainers in every section
numContainer.html("0" currentIndex ' / ' totalItems);
});
}
});
Любая помощь была бы очень признательна.
Ответ №1:
Вы должны использовать fullPage.js обратные вызовы, такие как onSlideLeave или afterSlideLoad .
Например:
$('#fullpage').fullpage({
anchors: ['firstPage', 'secondPage', 'thirdPage', 'fourthPage', 'lastPage'],
afterSlideLoad: function( anchorLink, index, slideAnchor, slideIndex){
var loadedSlide = $(this);
var totalItems = loadedSlide.siblings().length;
var numContainer = loadedSlide.closest('.fp-section').find('.num');
numContainer.html("0" slideIndex ' / ' totalItems);
}
});
Обновление декабрь 2021 — fullpage.js v3
Теперь это намного проще с новыми методами getActiveSlide и getActiveSection тем fullPage.js обеспечивает. Смотрите документы для получения дополнительной информации.
new fullpage("#fullpage", {
sectionsColor: ["yellow", "orange", "#C0C0C0", "#ADD8E6"],
anchors: ["firstPage", "secondPage", "thirdPage", "fourthPage", "lastPage"],
slidesNavigation: true,
afterSlideLoad: function (origin, destination, direction) {
setCounter();
},
afterRender: function(){
setCounter();
}
});
function setCounter(){
var sectionItem = fullpage_api.getActiveSection().item;
var numSlides = sectionItem.querySelectorAll(".fp-slide").length;
var currentSlideWrapper = document.querySelector(".counter");
var slideNumber = fullpage_api.getActiveSlide().index 1;
currentSlideWrapper.innerHTML = "0" slideNumber " / " numSlides;
}
Комментарии:
1. Спасибо @Alvaro, я только что обновил свою скрипку, и, похоже, она не работает jsfiddle.net/0hLzxrea/68
2. .Num был в разделе, а не на слайде, как я думал. Проверьте это здесь: jsfiddle.net/0hLzxrea/69 Также обновил ответ.
3. Большое тебе спасибо @Alvaro, ты сделал мой день! Просто вкратце, что, если .num находится за пределами #fullpage? Есть ли простой способ найти и обновить его?
4. Да, просто измените селектор:
loadedSlide.closest('.fp-section').find('.num');. Пожалуйста, примите ответ, если он решил вашу проблему, чтобы другие могли узнать об этом.5. единственная проблема, с которой я все еще сталкиваюсь, заключается в том, что счетчик не обновляется / перезапускается при изменении раздела.
Ответ №2:
В данный момент я здесь, и я уверен, что очень близок к решению. Проблема, по-прежнему, заключается в том, что если вы перейдете к предыдущему разделу, счетчик всегда будет 01 / XX вместо отображения номера фактического .активного слайда.
afterLoad: function(index, nextIndex, direction) {
var loadedSlide = $(this);
var slideIndex = find(".fp-slide .active") 1;
var totalItems = loadedSlide.closest(".fp-section").find(".fp-slide").length;
var numContainer = loadedSlide.closest(document).find(".num");
numContainer.html("0" slideIndex " / " "0" totalItems);
},
onLeave: function(index, nextIndex, direction) {
var section = $(this),
sectionSlides = section.find(".slide"),
totalItems = sectionSlides.length,
currentIndex = sectionSlides.filter(".fp-slide .active").length 1,
numContainer = section.closest(document).find(".num");
numContainer.html("0" currentIndex ' / ' "0" totalItems);
}
})
});