Responsive Carousel using Cycle2

Question

I'm working on a carousel using the cycle2 and cycle2-carousel plugins.

Found a solution here to display variable number of items depending on resized window width.

Problem is the carousel breaks due to another slideshow.

Everything is working until the main slideshow cycles it's first slide, then on page resize the carousel only displays one slide.

Demo

http://jsfiddle.net/yDRj4/1/

jQuery

function buildCarousel(visibleSlides) {
    $('.caro').cycle({
        fx: 'carousel',
        speed: 600,
        slides: 'img',
        carouselVisible: visibleSlides,
        carouselFluid: true
    });
}
function buildSlideshow() {
    $('.home-slideshow').cycle({
        fx: 'fade',
        slides: 'img',
        timeout: 12000
    });
}

function initCycle() {
    var width = $(document).width();
    var visibleSlides = 5;

    if ( width < 400 ) {visibleSlides = 1}
    else if(width < 700) {visibleSlides = 3}
    else {visibleSlides = 5};

    buildSlideshow();
    buildCarousel(visibleSlides);
}

function reinit_cycle() {
    var width = $(window).width();
    var destroyCarousel = $('.caro').cycle('destroy');

    if ( width < 400 ) {destroyCarousel;reinitCycle(1);} 
    else if ( width > 400 && width < 700 ) {destroyCarousel; reinitCycle(3);} 
    else {destroyCarousel;reinitCycle(5);}
}

function reinitCycle(visibleSlides) {
    buildCarousel(visibleSlides);
}
var reinitTimer;
$(window).resize(function() {
    clearTimeout(reinitTimer);
    reinitTimer = setTimeout(reinit_cycle, 100);
});

$(document).ready(function(){
    initCycle();    
});

HTML

<div class='main' style="max-width: 950px;margin: auto;">
    <div class="home-slideshow" style="margin-bottom: 150px;">
        <img style="width: 100%" src="http://placehold.it/950x250" alt="">
        <img style="width: 100%" src="http://placehold.it/950x250" alt="">
    </div>
    <div class="caro" >
        <img src="http://placehold.it/300x300" alt="">
        <img src="http://placehold.it/300x300" alt=""> 
        <img src="http://placehold.it/300x300" alt="">
        <img src="http://placehold.it/300x300" alt=""> 
        <img src="http://placehold.it/300x300" alt="">
        <img src="http://placehold.it/300x300" alt="">  
    </div>
</div>

Answer 1

For some reason, after the first slideshow transitions, when it recreates the Carousel, it is setting all of the images to have an opacity of 0.

Adding $('.caro img').css('opacity','1'); after initializing the carousel fixed it, but I'm sure there is a better solution for this, but you might have to dig into the source of the plugin.

http://jsfiddle.net/cZTxM/2/

Answer 2

You have the following line:

var destroyCarousel = $('.caro').cycle('destroy');

...which sets destroyCarousel to the result of that method call (a jQuery object), instead of creating a function you can call to perform the destruction.

I think this is what you meant to do:

function reinit_cycle() {
    var width = $(window).width();
    var destroyCarousel = function() { // create a function
        $('.caro').cycle('destroy');
    }

    if (width < 400) {
        destroyCarousel(); // call the function
        reinitCycle(1);
    } else if (width > 400 && width < 700) {
        destroyCarousel();
        reinitCycle(3);
    } else {
        destroyCarousel();
        reinitCycle(5);
    }
}

http://jsfiddle.net/mblase75/7eAk2/