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

Loading new content into a responsive slider

本文关键字：响应 新内容 加载      更新时间：2023-09-26

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

http://www.herschelsupply.com/

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

更多信息

我遇到的问题是这些：

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

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

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

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

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

<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>标签。 相反，您的滑动元素应该与 CSS 背景图像<div>。 这样，在媒体查询中，您可以更改<div>的背景图像。 我不确定您使用的滑块是否可以支持此功能，有些滑块依赖于滑动实际的 HTML <img>标签。 有些可以随心所欲地滑动。 你应该能够管理我用Flexslider描述的内容（快速的谷歌搜索会让你到达你需要的地方）。

相关文章：