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

Я использую Cycle2 Carousel pager, очень похожую на пример здесь.

Моя проблема в том, что предыдущий и следующий слайдеры работают нормально, но нажатие на карусель не изменит слайд на другом слайдере. Он работает в примере Cycle2, приведенном выше.

Проверьте JS в скрипке:

http://jsfiddle.net/yCCLL/1/

CSS в примере разбит, но это не имеет значения, вы можете понять, в чем проблема. Если вы нажмете дальше, он начнет цикл, но щелчок по изображениям в карусели не изменит слайдер.

Я всегда получаю сообщение об ошибке в консоли:

[cycle2] goto: invalid slide index
3 ответа

Я решил это двумя способами (почти....)

  1. добавив в контейнер карусельного пейджера data-cycle-allow-wrap="false". теперь это кажется полным доказательством,

  2. Я начал получать результат с бесконечным пейджером, изменив стандартный jQuery с демонстрационной страницы

    var slideshows = $('#gallbig');
    
     var adjust = slideshows.children('img').length;
    
     $('#no-template-pager .cycle-slide').click(function(){
     var index = $('#no-template-pager').data('cycle.API').getSlideIndex(this);
     slideshows.cycle('goto', index - adjust);
     });

но это не удается, когда оно обертывается, так как мне не нужны эти функции, я пошел с вариантом один, но это может помочь вам начать, если вы после бесконечной карусели.

NB мое первое исправление, которое я сейчас использую, имеет тот же самый фрагмент jQuery с настройкой var.


Я понимаю, что немного опоздал на вечеринку, но думал, что поделюсь своим собственным решением, которое работает с набором data-cycle-allow-wrap установленным в true

Здесь есть две проблемы. Во-первых, когда для параметра data-cycle-allow-wrap установлено значение true дублированные слайды никогда не проходят через .click() обратного вызова .click()

Во-вторых, как упоминалось Blazemonger, дублирование отменяет индексацию для каждого слайда

Решение

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

<!--?php 
 $i = 0; 
 foreach($images as $image) { 
 echo '<img class="cycle-slide" data-index="' . $i . '" src="' . $image . '" /-->';
 $i++;

 } 
?>

Затем в JavaScript вместо использования .click() я использовал .on(), воспользовавшись делегированием событий и получив индекс от атрибута data вместо того, что возвращается из плагина:

$('#cycle2').on('click', '.cycle-slide', function(){
 $('#cycle1').cycle('goto', $(this).data('index'));
});


Я только что видел это после борьбы с моей собственной карусельной пейджером, так что вот что я сделал, надеюсь, что это поможет кому-то там: (некоторый код, взятый из примера карусели пейджера на сайте Cycle2)

$(document).ready(function(){

 // Cycle2 Slider:
 var slideshows = $('.cycle-slideshow');//selects both slideshows
 slideshows.on('cycle-next cycle-prev', function(e, opts) {
 // advance the other slideshow
 slideshows.not(this).cycle('goto', opts.currSlide);
 });

 $('.carousel .cycle-slide').click(function(){
 var index = $('.carousel').data('cycle.API').getSlideIndex(this);
 var slide_count = $('.carousel').data("cycle.opts").slideCount;

 // subtract the slide amount until the slide count is within bounds:
 while(index > slide_count) {
 index = index - slide_count;
 }
 slideshows.cycle('goto', index);
 });

});

licensed under cc by-sa 3.0 with attribution.