Cycle2 слайд-шоу с карусельным пейджером не работает

Пейджер построен с использованием "Расширенного пользовательского шаблона" на слайд-шоу карусели.

Обе слайд-шоу обеих сторон выглядят нормально, пока я не щелкнул пейджер, тогда он действует странно: активный слайд не меняет позицию; при нажатии на элемент на пейджере не отображается правильный слайд в главном слайд-шоу, а затем полностью перестает работать.

См. Здесь: http://jsfiddle.net/Shmfv/1/

<div data-cycle-slides="> div" data-cycle-fx="scrollHorz" data-cycle-pager-template="<a href='#' ><img src='{{children.0.src}}'><h3>{{children.1.textContent}}</h2><h3>{{children.2.textContent}}</h2></a>" data-cycle-pager=".boxNav">
 <div>...</div>
 <div>...</div> 
 <div>...</div>
 </div>

Мысли?

2 ответа

Наконец выяснилось обходное решение... Невозможно использовать опцию плагина пейджера и пришлось добавить некоторые скрипты.

//заполняем пейджер

$('.boxGaleria > div').clone().appendTo('.boxNav');

//обновлять активный слайд в обоих слайд-шоу

var slideshows = $('.cycle-slideshow').on('cycle-update-view',function(event, opts) {
 slideshows.not(this).cycle('goto', opts.currSlide);
});

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

$('.boxNav div').click(function(){
 var index = $('.boxNav').data('cycle.API').getSlideIndex(this);
 var todos = $('.boxGaleria').data('cycle.opts').slideCount;
 slideshows.cycle('goto', (index-todos));
});


эй Проверьте этот вопрос и ответ здесь

jQuery Cycle2 - Навигация пейджера карусели

были проблемы с похожим методом с вашими.

licensed under cc by-sa 3.0 with attribution.