Cycle2傳送帶使用媒體查詢創建響應式佈局

Question

我一直在使用Cycle2傳送帶，我希望顯示的幻燈片數量根據媒體查詢而變化。

我不是100％確定最好的方法來做到這一點，因爲如果我沒有指定可見的幻燈片的數量，它將顯示我的容器的所有可能。我希望這個號碼根據媒體查詢變化..即我們顯示的大型設備7幻燈片，小我們顯示3.

任何關於如何進行的建議？

感謝 威爾

<div class='main'> 

<div class="caro"> 
    <img src="http://placehold.it/230x190" alt=""> 
    <img src="http://placehold.it/130x130" alt=""> 
    <img src="http://placehold.it/130x130" alt=""> 
    <img src="http://placehold.it/130x130" alt=""> 
    <img src="http://placehold.it/130x130" alt=""> 
    <img src="http://placehold.it/130x130" alt=""> 
</div> 

function buildCarousel() { 
    $('.caro').cycle({ 
     fx: 'carousel', 
     speed: 600, 
     slides: 'img', 
     carouselVisible: 3 

    }); 
} 


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

裁判jsfiddle

Answer 1

我希望你可能已經是具有用於不同屏幕尺寸的媒體查詢。您可以使用以下技巧來實現上述目標。

- 設置了狀態指示器默認的CSS屬性（我用的z-index）

- 具備媒體查詢代碼來設置屬性不同的寬度。

（您想幻燈片的數量） - 屏幕大小重建旋轉木馬。

請找到下面搗鼓爲同一

DEMO

.state-indicator { z-index: 7; } 


@media all and (max-width: 768px) { 
    .state-indicator { z-index: 6; } 
} 

@media all and (max-width: 500px) { 
    .state-indicator { z-index: 5; } 
} 

@media all and (max-width: 350px) { 
    .state-indicator { z-index: 4; } 
} 

@media all and (max-width: 260px) { 
    .state-indicator { z-index: 3; } 
}