Cycle2 slideshow with carousel pager not working

Question

The pager is built using the "Advanced Custom Template" on a carousel slideshow.

Boths slideshows look ok until I click the pager, then it acts strange: active slide doesn't change position; when clicking an item on the pager, doesn't show correct slide in main slideshow then stops working altogether.

See it here: http://jsfiddle.net/Shmfv/1/

    <div class="boxGaleria cycle-slideshow" 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>
    <div class="boxNav cycle-slideshow" data-cycle-timeout="1500" data-cycle-fx="carousel" data-cycle-carousel-visible="3" data-allow-wrap="true" data-cycle-carousel-fluid="true" data-cycle-slides="> a"></div>    

Thoughts?

Answer 1

Finally figured out a workaround... Can't use the plugin's pager option and had to add some scripting.

// fill the pager

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

// update active slide in both slideshows

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

// add click to the carousel/pager, correct slide index because the carousel adds a few duplicate children before and after to display correctly

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