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.