jQuery Cycle2 - Карусель пейджер навигации

Question

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

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

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

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

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

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

[cycle2] goto: invalid slide index

Answer 1

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

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);
     });
   

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

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

Answer 2

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

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

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

Решение

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

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

    } 
?>

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

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

Answer 3

Я только что увидел это после борьбы со своим собственным пейджером с каруселью, так что вот что я сделал, надеюсь, это кому-нибудь поможет: (какой-то код взят из примера с каруселью пейджера на сайте 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);
    });

});