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();
});

ref 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; }
}