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