cycle2 startingSlide doesn't work when using effect: carousel and allowWrap:false

With the Cycle2 script the slideshow doesn't postion itself (CSS left propperty) when using effect = Carroussel, allowWrap = false and startingSlide = not 0.

Has anybody had this problem before?

$(function() {
    $('.slider').cycle({
        fx: 'carousel',
        speed: 300,
        slides: "> div.pane",
        carouselVisible:2,
        //carouselVertical:true,
        carouselFluid:false,
        allowWrap: false,
        startingSlide: 4
    });
});

See: http://jsfiddle.net/gshtZ/11/

Feb 26 '13 10:02 brrrm

I fixed this problem now by calculating the required value for the CSS Left position and setting it after initializing. Temporary example: http://intermin.bramdeleeuw.nl

Mar 08 '13 10:03 brrrm

I never got a reply on this issue and I was wondering if the reported issue is considered as a faulty implementation or as a bug.

Cheers, Bram.

Mar 12 '13 15:03 brrrm

Sorry for not replying. Sounds like a bug. I'll look into it.

Mar 22 '13 13:03 malsup

Cool, thanks!

You can see my live implementation of cycle2 at www.intermin.nl. It uses the above settings and I dealt with the problem (temporarily) by calculating the required LEFT-position of the carousel-wrap and setting it after initialization.

Mar 22 '13 13:03 brrrm

I have the same problem, plus the next/prev functionality doesn’t work correctly anymore. As far as I can see the active class is properly changed but it’s not scrolling correctly. Since I’m using this for a client’s website it would be awesome if that is fixed soon.

Apr 06 '13 10:04 ghost

@1010110 You can fix it temporarily by using the following code:

$('#content_slideshow').on('cycle-initialized', function( event, opts){
    if(opts.container.attr('id') == 'content_slideshow'){
        bind_cycle_elements(opts);
        if(opts.startingSlide > 0 && !opts.carouselVertical){
            setTimeout(function(){
            // The timeout is needed to make sure the slideshow is fully initialized.
                if($('.cycle-carousel-wrap').css('left') == '0px'){
                    var newWidth = $('.cycle-carousel-wrap .im_slide:first-child').width();
                    var newLeft = newWidth * opts.startingSlide * -1;
                    $('.cycle-carousel-wrap').css('left', newLeft);
                }
            }, 10);
        }
    }
});
$('#content_slideshow').cycle({
              fx: 'carousel',
              speed: 300,
              slides: "> div.im_slide ",
              carouselVisible:2,
              carouselVertical:true,
              carouselFluid:false,
              //allowWrap: false,
              paused: true,
              startingSlide: 4,
              log: false
            });

Apr 06 '13 11:04 brrrm

I made a quick fix to my plugin-file. The fix seems to work for my purpose. Looking at line 123, the offset is not calculated at all, if allowWrap is false:

if ( opts.allowWrap !== false ) {

And there's no else. So I just copied and modified some code from this section and added it to a new else function. The modified part is:

Old:

for (var j=0; j < (opts.slideCount + opts.currSlide); j++) {

New

for (var j=0; j < (opts.currSlide); j++) {

So, the new else function in it's entirety in jquery.cycle2.carousel.js, at row 135:

else {
    // calculate offset based on actual slide dimensions
    tmp = opts._carouselWrap.children();
    for (var j=0; j < (opts.currSlide); j++) {
        offset -= $(tmp[j])[vert?'outerHeight':'outerWidth'](true);
    }
}

May 29 '13 11:05 tnottu

+1 for a fix I've run into this issue also.

startingSlide doesn't work when using the carousel pager. I've tried the fixes @thomutin and @brrrm suggested.

What did seem to work was using the development .js file rather than the minified production version. Now the problem is that it doesn't let me go all the way back to the first slide.