使用Cycle2的響應旋轉木馬

Question

我正在使用cycle2和cycle2-carousel插件進行輪播。

找到一個solution here根據調整後的窗口寬度顯示可變數量的項目。

由於另一個幻燈片顯示問題是傳送帶斷開。

一切都在工作，直到主幻燈片循環它的第一張幻燈片，然後在頁面上調整旋轉木馬只顯示一張幻燈片。

演示

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

出於某種原因，第一個幻燈片過渡後，當它重新創建旋轉木馬，這是所有的圖像設置爲具有不透明度爲0.

在初始化傳送帶之後添加$('.caro img').css('opacity','1');固定它，但我確信有更好的解決方案，但您可能需要挖掘插件的源代碼。

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

Answer 2

您有以下行：

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

...這臺destroyCarousel該方法調用（jQuery對象）的結果，而不是創建一個功能，你可以打電話進行破壞。

我覺得這是你的意思辦：

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/