JQuery Cycle 2: как правильно показать индекс первого слайда?

Я использую JQuery Cycle 2, и мне нужно показать индекс слайда при его отображении.

Вот HTML:

 <div id="slideshow"  data-cycle-auto-height="container" data-cycle-slides="> div"  >
    <div>slide 1</div>
    <div>slide 2 </div>
    <div>slide 3 </div>
    <div>slide 4</div>
</div>
<div id="caption"></div>

Вот Javascript:

$('#slideshow').cycle({
    delay: 0
});

$('#slideshow').on('cycle-before', function (e, optionHash, outgoingSlideEl, incomingSlideEl, forwardFlag) {
    var caption =  (optionHash.currSlide + 1) + ' of ' + optionHash.slideCount;
    $('#caption').html(caption);
});

Вот демонстрация скрипки:

http://jsfiddle.net/mddc/kKD9S/1/

Проблема в том, что при загрузке страницы отображается первый слайд, но событие "цикл до" не срабатывает и первый слайд как бы обрабатывается последним.

Что я сделал не так?

Спасибо!


jquery-cycle jquery-cycle2
person curious1    schedule 31.01.2014    source источник

Ответы (2)


arrow_upward
6
arrow_downward

Событие «цикл до» срабатывает только до того, как произойдет переход. Когда вы инициализируете слайд-шоу, перехода нет, так что это даже никогда не будет вызываться.

Кроме того, поскольку событие «цикл до» запускается перед сменой слайда, optionHash.currSlide всегда будет предыдущим слайдом, а поскольку он имеет индекс 0, вы будете отставать на 1.

Чтобы исправить эти проблемы, измените событие cycle-before на событие cycle-update-view, которое запускается после обновления слайда, а также будет вызываться после инициализации цикла:

$('#slideshow').on('cycle-update-view', function (e, optionHash, slideOptionsHash, currSlideEl) {
    var caption = 'Image ' + (optionHash.currSlide + 1) + ' of ' + optionHash.slideCount;
    $('#caption').html(caption);
});

Вот как это работает: http://jsfiddle.net/ZY4uR/2/

person Bryan    schedule 06.02.2014
comment
@Bryan В вашем ответе есть несколько полезных советов по использованию циклических событий. Я опубликовал более простой подход, который использует параметры подписи Cycle, если это полезно. - person Dylan; 27.03.2014

arrow_upward
1
arrow_downward

Цикл 2 включает параметры caption и captionTemplate, которые позволяют вам добавлять подпись, включая количество слайдов, без необходимости привязки к одному из событий цикла.

$('#slideshow').cycle({
    caption: '#caption',
    captionTemplate: '{{slideNum}} of {{slideCount}}'
});

Ознакомьтесь с Cycle 2 API и демонстрационная страница подписи для более подробной информации.

person Dylan    schedule 27.03.2014