[英]Cycle2 carousel creating a responsive layout using media queries
I've been playing with Cycle2 carousel and I wish to have the number of slides displayed change depending on a media query. 我一直在玩Cycle2轮播,并且希望显示的幻灯片数量根据媒体查询而变化。
I'm not 100% sure the best way to do this as if I don't specify the number of slides visible it will display all possible for my container. 我不确定100%地确定执行此操作的最佳方法,就好像我没有指定可见的幻灯片数一样,它会显示我的容器的所有可能。 I'd like to have this number change depending on a media query .. ie large devices we display 7 slides, small we display 3.
我想根据媒体查询来更改此数字。例如,大型设备显示7张幻灯片,小型设备显示3张幻灯片。
Any recommendations on how to proceed ? 关于如何进行的任何建议?
Thanks Will 谢谢威尔
<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();
});
I hope you might already be having media queries for different screens sizes. 我希望您可能已经在查询不同屏幕尺寸的媒体了。 You can achieve the above using the following trick.
您可以使用以下技巧来实现上述目的。
-Set a default CSS property for state-indicator(I have used z-index) -为状态指示器设置默认的CSS属性(我已经使用了z-index)
-Have media query code to set the property for different width.(Number of slides you want) -具有媒体查询代码以将属性设置为不同的宽度。(所需的幻灯片数量)
-Upon screen resize rebuild the carousel. -在屏幕上调整大小以重建轮播。
Please find below the fiddle for the same 请在小提琴下面找到相同的
.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; }
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.