0

当页面调整大小时，此滑块如何重新加载新内容？

http://www.herschelsupply.com/

我在购物时偶然发现了这一点，他们的滑块很好地复制了我想为自己的网站创建的内容。当窗口调整大小时，他们的滑块会在某个点加载新内容。我在使用 BxSlider 时遇到了麻烦，因为我是 JS 新手。

更多信息

我遇到的问题是：

  1. 我可以使用 css 媒体查询或 jQuery 隐藏某些幻灯片，但它们仍保留在 DOM 中，因此滑块仍将它们显示在寻呼机中，有时它只是停止旋转/中断。

  2. 如果我创建两个不同的滑块以不同的宽度加载，则在调整页面大小时不会发生更改。这似乎也很浪费。

  3. 如果我在 $(window).resize() 上从 DOM 中删除和替换元素，如果窗口不断来回调整大小，我不确定如何将它们返回到 DOM。

总的来说，我只是问你会采取什么方法来做到这一点？很抱歉，这是否更接近于讨论而不是具体问题，但我不确定还有什么要问的。

4

1 回答 1

0

您展示的网站只有两个完全独立的幻灯片。当窗口调整大小时，一个被隐藏，另一个显示。

<div id="slider-one" class="hide-for-mobile">
/*Slider here*/
</div>

<div id="slider-two" class="show-for-mobile">
/*Slider here*/
</div>

然后在您的移动媒体查询中...

.hide-for-mobile {
display: none;
}

.show-for-mobile {
display: block;
}

现在，对于一个更符合您尝试做的事情的解决方案......您需要做的是远离 HTML<img>标记。相反，您的滑动元素应该<div>带有 CSS 背景图像。这样，在您的媒体查询中，您可以更改<div>'s 的背景图像。我不确定您使用的滑块是否支持这一点，有些取决于滑动实际的 HTML<img>标记。有些可以滑动任何你想要的。您应该能够使用 Flexslider 管理我所描述的内容（快速的 google 搜索将带您到您需要的地方）。

于 2013-09-18T15:45:27.837 回答