1

我正在尝试在我的网站上实现响应式设计，但我在特色内容滑块上有点卡住了。

我将Coda Slider用于我的特色内容幻灯片，对于小屏幕宽度，我希望中止滑块的 jQuery 函数并删除幻灯片函数的内联样式，以便它简单地显示块.

我很确定我以前见过这样的示例，但是当我刚刚浏览我的书签以在此处发布示例时，我真的找不到任何实际上看起来像这样工作的示例。也许是因为 JS 的限制会使这不可行？

这是我用来实现滑块的 jQuery。有什么我可以简单地添加的东西可以告诉它中止并在特定尺寸以下的屏幕宽度下恢复正常吗？

   // Coda slider via http://www.ndoherty.biz/demos/coda-slider/2.0/

   $('#coda-slider-1').codaSlider({
        dynamicArrows: false,
        dynamicTabs: false,
        autoSlide: true,
        autoSlideInterval: 4000,
        slideEaseDuration: 500,
        autoSlideStopWhenClicked: true,
   });

现在我只是在头部使用两个通过媒体查询实现的样式表，如下所示：

<link rel="stylesheet" href="/css/2011/fullwidth-responsive.css" media="only screen and (min-width : 480px)" />
<link rel="stylesheet" href="/css/2011/mobile.css" media="only screen and (min-width : 320px) and (max-width : 480px)" />

因此，我希望 JS 中止与启动的移动样式表相对应，基本上我将仅使用 CSS 呈现内容，而不使用任何 JS 演示动画等，例如滑块用于整个站点。

4

1 回答 1

3

有几种方法可以做到这一点，但总会有一些区别（除非你实现了一个真正高级的检测设置来响应实时窗口的变化）。媒体查询将响应任何大小变化（在任何时候），我们这里的代码只会运行一次（就在我们初始化 Coda 滑块之前）：

1.通过屏幕可用宽度的小检查来检测宽度：

if ( screen.availWidth > 480 ) {
  // .. initialize Coda here ..
}

2.检测您使用移动样式表应用的特定样式：

例如，say#header在50px你的mobile.css. 您可以通过检查该高度来检测该工作表是否处于活动状态：

if ( $( "#header" ).width() != 50 ) {
  // .. initialize Coda here ..
}

还有其他方法（例如创建虚拟媒体查询等），但其中任何一种都应该满足您的需求。

注意：您可能还需要有一个“else”语句来删除/添加您的移动布局可能需要的类。

于 2012-01-03T17:12:47.767 回答