Switching to vertical false on the fly

[digiTeam]

I'm trying to switch my vertical carousel to be horizontal on screen width. I have:

$(document).ready(function () { var lCarousel = $('.jcarouselLarge').jcarousel({ // Configuration goes here wrap: 'circular', animation: 'slow' }) var sCarousel = $('.jcarouselSmall').jcarousel({ // Configuration goes here wrap: 'circular', vertical: true, animation: 'slow' })

$('.jcarouselSmall').jcarouselAutoscroll({
    interval: 6000,
    target: '+=1',
    autostart: true,
    carousel: sCarousel
})

$('.jcarouselLarge').jcarouselAutoscroll({
  interval: 6000,
   target: '+=1',
   autostart: true,
  carousel: lCarousel
})
;

});

And then

if ($(window).width() <= 990) {

    $('.jcarouselSmall').jcarousel({
        vertical: false
    });

    }

I have tried various other methods like reloading but i can't get it to work.

[jsor]

The functional tests have exactly this functionality: https://github.com/jsor/jcarousel/blob/master/test/functional/animation.html#L121-L122 CSS files: https://github.com/jsor/jcarousel/tree/master/test

[digiTeam]

Thanks so much for your response. It seems then, that (with a reload) its the width and height of the of the root element that will determine the switch back to horizontal? I'm getting really varied results but I think that's because I am setting the width on a different element as I have a grid in place making the section responsive and have 2 carousels in one section. https://youtu.be/f-QMGeL_pT0

[jsor]

Yes, by default jCarousel tries to autodetect the orientation. You can force by setting the vertical option.

[digiTeam]

Thanks, sorry to come back on this. I can get it switching back to horizontal scroll but the animation is non existent. Im injecting this in debug: $('.jcarouselSmall').jcarousel('reload', { wrap: 'circular', vertical: false, animation: 'slow', rtl:false });

[jsor]

Could you setup a reproducible test case at jsfiddle?

[digiTeam]

Will codepen do? http://codepen.io/_minimum/pen/waYOdy. The browser width needs resizing to less than 990px and then reload the page.

[jsor]

It is important, that you set the width to 20000em and height to auto for a horizontal carousel, and width to auto and height to 20000em for a vertical carousel. If you do that, do not set the vertical option as that overrides the auto-detection.

[digiTeam]

Just revisiting this design. I have made the amendments you suggested but the carousel doesn't autoscroll when changed from horizontal to vertical and vice versa. is there a way I can reinitialise the carousel, I have tried invoking a reload but that seems to not work. Thanks