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

我希望您可能已经针对不同的屏幕尺寸进行了媒体查询。您可以使用以下技巧实现上述目的。

- 设置state-indicator的默认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; }
}

Cycle2轮播使用媒体查询创建响应式布局

1 个答案: