jQuery Cycle2 - Carousel pager navigation

Question

I'm using Cycle2's Carousel pager, very similar setup to the example here.

My problem is that the previous and next sliders work fine, but clicking on the carousel won't change the slide in the other slider. It's working in the Cycle2 example linked above.

Check the JS in the fiddle:

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

The CSS in the example is broken but it doesn't matter, you can see what the problem is. If you click next it cycles but clicking on the images in the carousel doesn't change the slider.

I always get the error message in the console:

[cycle2] goto: invalid slide index

Answer 1

I solved this in two ways (almost....)

1. by adding data-cycle-allow-wrap="false" to the carousel pager container. this seems to be full proof now,

2. I started getting a result with an infinite pager by changing the standard jQuery from the demo page

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

but that fails once it wraps around, as I don't need this features I've gone with option one, but this may get you started if you're after an infinite carousel.

NB my first fix that I'm now using has the same jQuery snippet withouth the adjust var.

Answer 2

I realise I'm a little late to the party but thought I'd share my own solution which works with data-cycle-allow-wrap set to true

There are 2 problems here. The first is when data-cycle-allow-wrap is set to true the duplicated slides never go through the .click() callback function

Secondly, as mentioned by Blazemonger the duplication throws off the indexing for each slide

The Solution

First off I set an "index" data attribute on each slide in my markup like below. When the plugin duplicates the slides it takes the data attribute along with it

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

    } 
?>

Then in the JavaScript rather than using the .click() method I used .on() taking advantage of event delegation and got the index from the data attribute instead of what is returned from the plugin:

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

Answer 3

I just saw this after struggling with my own carousel pager, so here's what I did, hope it helps someone out there: (some code taken from the pager carousel example on the Cycle2 site)

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

});