Question

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

http://www.herschelsupply.com/

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

更多信息

我遇到的问题是：

我可以使用css媒体查询或jQuery来隐藏某些幻灯片，但它们仍保留在DOM中，因此滑块仍会在寻呼机中显示它们，有时它会停止旋转/中断。
如果我创建两个不同的滑块以不同的宽度加载，则在调整页面大小时不会发生更改。这看起来也很浪费。
如果我在$（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>的背景图片。我不确定您使用的滑块是否支持此功能，有些依赖于滑动实际的HTML <img>标记。有些人可以随意滑动。您应该能够管理我使用Flexslider所描述的内容（快速谷歌搜索将帮助您获得所需的位置）。

将新内容加载到响应滑块中

1 个答案: