Cycle2 Carousel active slide in center

Question

I am using Cycle2 with a carousel pager, in the same way as this demo: http://jquery.malsup.com/cycle2/demo/caro-pager.php

Currently the active slide in the demo is on the left unless you are on the last few slides. What I would like is:

1. for the active slide to start on the left, on slide 1
2. then when slide 2 is clicked, the thumbnails don't move but the second thumbnail shows as active.
3. When slide 3 is clicked, the thumbnails don't move but the third thumbnail (in the middle) becomes active).
4. When slide 4 is clicked, all thumbnails move one to left and fourth thumbnail (now in the middle) is active.
5. Same as above for slides 5, 6, 7.
6. When slide 8 is clicked, thumbnails don't move but eighth thumbnail becomes active (now second from right)
7. When slide 9 is clicked, thumbnails don't move but ninth thumbnail become active (the last thumbnail on right).

See diagram:

I have copied the demo to a jsfiddle here: http://jsfiddle.net/Qhp2g/1/ but would really appreciate some help as I'm not sure where to start(!) I have tried using data-cycle-carousel-offset="40%" on #cycle-2 as this user tried with a similar problem to me Cycle2: Center Carousel active slide below main slideshow and this does not work because you can't access the last slides and there is space on the left at the beginning.

I assume I may need to change the plugin carousel script - http://malsup.github.io/jquery.cycle2.carousel.js - for my needs but really not sure where to start! Thank you so much for any help.

Answer 1

The thing you will have to do is edit the jquery.cycle2.carousel.js file, and change the transition function. I hard-coded the offset, but you can probably code it to be based off of the percentage that you give it if you want.

Here are the main changes:

var offset = 2; //Set the offset of your carousel, for 5 it will be 2.
//Use this offset to calculate the max and min slide locations.
var maxCurr = opts.slideCount - (opts.carouselVisible - offset);
var minCurr = opts.slideCount - (opts.carouselVisible + offset);

...

//Add the following conditions to account for the new minCurr
else if (hops > 0 && opts.nextSlide <= minCurr){
    hops = 0;
}
else if (hops < 0 && opts.currSlide <= minCurr){
    hops = 0;
}
else if (hops > 0 && opts.currSlide < minCurr && opts.nextSlide > minCurr){
    hops = opts.nextSlide - minCurr;   
}
else if (hops < 0 && opts.nextSlide < minCurr){
    hops = opts.nextSlide - minCurr;   
}

See the working fiddle here: http://jsfiddle.net/m66tS/10/

Answer 2

I have taken Bryan's wonderful answer above and made some changes. There was a bug with his solution if the minCurr was actually less than the offset (sometimes it even goes negative). His solution worked for 8+ thumbnails with 5 visible and and offset of 2. However I only had 6 thumbnails with 5 visible and an offset of 2 therefore minCurr = 6 - (5 + 2) = -1 Also if I had 7 thumbnails with 5 visible and an offset of 2 minCurr = 1 and the same problem exists.

The solution is to change

var minCurr = opts.slideCount - (opts.carouselVisible + offset);

to

var minCurr = opts.slideCount - (opts.carouselVisible + offset);
if(minCurr < offset ){
   var minCurr = offset;
} 

After doing this I also had to make some other adjustments for the case where you clicked forward or backward by over the offset amount near the start of end and the carousel moved too far.

My edited code now looks like this:

    var offset = 2; //Number of slides to offset
    // handle all the edge cases for wrapping & non-wrapping
    if ( opts.allowWrap === false ) {
        fwd = hops > 0;
        var currSlide = opts._currSlide;
        var maxCurr = opts.slideCount - (opts.carouselVisible - offset);
        var minCurr = opts.slideCount - (opts.carouselVisible + offset);
        if(minCurr < offset){
            minCurr = offset;
        }
        if(fwd){ // MOVING FORWARDS
            if ( opts.nextSlide > maxCurr && currSlide == maxCurr|| opts.nextSlide <= minCurr ) {
                hops = 0;
            }
            else if (opts.currSlide < minCurr && opts.nextSlide > maxCurr || opts.nextSlide > maxCurr){
                 hops += opts.currSlide - maxCurr;
            }
            else if (opts.currSlide < minCurr && opts.nextSlide > minCurr){
                 hops = opts.nextSlide - minCurr;  
            }
            else {
                currSlide = opts.currSlide;
            }

        } else { // MOVING BACKWARDS
            if ( opts.currSlide > maxCurr && opts.nextSlide > maxCurr || opts.currSlide <= minCurr ) {
                hops = 0;
            }
            else if (hops < -offset && opts.nextSlide < minCurr){
                hops = opts.nextSlide;
            }
            else if ( opts.currSlide > maxCurr) {
                hops += opts.currSlide - maxCurr;
            }
            else if (opts.nextSlide < minCurr){
                hops = opts.nextSlide - minCurr; 
            }
            else {
                currSlide = opts.currSlide; 
            }
        }


        moveBy = this.getScroll( opts, vert, currSlide, hops );
        opts.API.opts()._currSlide = opts.nextSlide > maxCurr ? maxCurr : opts.nextSlide;
    }

Answer 3

You can use JQuery lightSlider, It support active thumbnail slide on pager always center also have custom callback to customization.

http://sachinchoolur.github.io/lightslider/

http://sachinchoolur.github.io/lightslider/settings.html