Question

我需要在网站上添加一个转盘，根据屏幕宽度显示不同数量的幻灯片，例如如果屏幕是1920px宽度，它将显示7项，如果宽度是980px - 4项等。我想有很多jquery插件可以做到这一点。还有一件事 - 当屏幕宽度很小并且它只能包含一个项目时 - 我需要轮播停止作为旋转木马并且只是将项目堆叠在另一个之下。有什么更好的方法呢？

Answer 1

你可以用CSS做到这一点：

@media only screen and (min-width: 768px) and (max-width: 959px) {
/* do stuff for big screens*/
   .small-screen-carousel{
        display:none;
   }
   .big-screen-carousel{
        display:block;
   }

}
@media only screen and (min-width: 480px) and (max-width: 767px) {
/* do stuff for medium screens*/
}
@media only screen and (min-width: 80px) and (max-width: 479px) {
/* do stuff for samll screens*/

    .small-screen-carousel{
        display:block;
    }
    .big-screen-carousel{
        display:none;
    }
}

Answer 2

我遇到了同样的问题而且我更改了插件并使用了弹性滑块，它完全像您需要的那样http://tympanus.net/codrops/2011/09/12/elastislide-responsive-carousel/

是否有旋转木马在小屏幕上停止旋转木马？

2 个答案: