javascript - 将新内容加载到响应式 slider 中

Question

此 slider 如何在调整页面大小时重新加载新内容？

http://www.herschelsupply.com/

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

---

更多信息

我遇到的问题是:

1. 我可以使用 css 媒体查询或 jQuery 来隐藏某些幻灯片，但它们保留在 DOM 中，因此 slider 仍会在分页器中显示它们，有时它只是停止旋转/中断。

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

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

---

总的来说，我只是想问一下您会采用什么方法来做到这一点？如果这更接近于讨论而不是特定问题，我很抱歉，但我不确定还能问哪里。

Answer 1

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

<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> 的背景图像。的。我不确定你使用的 slider 是否支持这个，有些依赖于滑动实际的 HTML <img>标签。有些可以随心所欲地滑动。您应该能够管理我在 Flexslider 中描述的内容(快速谷歌搜索将带您到达您需要的位置)。