【问题标题】:Is there a carousel that stops being carousel on small screen? [closed]有没有在小屏幕上停止轮播的轮播? [关闭]
【发布时间】:2015-04-21 09:37:56
【问题描述】:

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

【问题讨论】:

  • 请发布您目前拥有的 html 和 css
  • 查看响应式轮播
  • @R4nc1d 我真的希望你能推荐一些表现和我描述的一样的特定轮播。那里有数百个。

标签: javascript jquery css jquery-plugins


【解决方案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;
    }
}

【讨论】:

    【解决方案2】:

    我遇到了同样的问题,我更改了插件并使用了 elastislide,它完全符合您的需求http://tympanus.net/codrops/2011/09/12/elastislide-responsive-carousel/

    【讨论】:

    • 我要试一试。谢谢。
    • 对于静态和动态目的,@dKab 很容易使用
    猜你喜欢
    • 1970-01-01
    • 2021-07-22
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2022-10-17
    相关资源
    最近更新 更多