将新内容加载到响应滑块中(Loading new content into a responsive slider)
当页面调整大小时，此滑块如何重新加载新内容？
http://www.herschelsupply.com/
我偶然发现了购物和滑块是我想要为自己的网站创建的一个很好的传真。 当调整窗口大小时，它们的滑块会在某个点加载新内容。 我在使用BxSlider时遇到了麻烦，因为我是JS的新手。
更多信息
我遇到的问题是：
我可以使用css媒体查询或jQuery来隐藏某些幻灯片，但它们仍保留在DOM中，因此滑块仍会在寻呼机中显示它们，有时它只会停止旋转/中断。
如果我创建两个不同的滑块以不同的宽度加载，则在调整页面大小时不会发生更改。 这看起来也很浪费。
如果我在$（window）.resize（）上删除和替换DOM中的元素，我不知道如果窗口连续来回调整窗口，如何将它们返回到DOM。
总的来说，我只是问你采取什么方法来做到这一点？ 我很抱歉，如果这更多地是针对讨论而非特定问题，但我不知道还有什么要问的。
How does this slider reload new content as the page is resized?
http://www.herschelsupply.com/
I stumbled across this whilst shopping and their slider is a good facsimile of what I want to create for my own site. Their slider loads new content at a certain point when the window is resized. I have had troubles doing that using BxSlider because I am new to JS.
More info
The problems I have had are these:
I can use css media query or jQuery to hide certain slides, but they remain in the DOM so the slider still displays them in the pager and sometimes it just stops rotating/breaks.
If I create two different sliders to be loaded at different widths the change does not occur as the page is resized. Also this seems wasteful.
If I remove and replace elements from the DOM on $(window).resize(), I am not sure how to return them to the DOM if the window is resized back and forth continuously.
Overall I am just asking what approach you would take to do this? Im sorry if this is verging more towards discussion than a specific question, but I'm not sure where else to ask.
原文：https://stackoverflow.com/questions/18876492
最满意答案
您展示的网站只有两个完全独立的幻灯片。 一个是隐藏的，另一个是在窗口调整大小时显示的。
<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描述的内容（快速谷歌搜索将帮助您获得所需的位置）。The website you showed simply has two completely separate slideshows. One is hidden and another is shown when the window resizes.
<div id="slider-one" class="hide-for-mobile"> /*Slider here*/ </div> <div id="slider-two" class="show-for-mobile"> /*Slider here*/ </div>Then in your media query for mobile...
.hide-for-mobile { display: none; } .show-for-mobile { display: block; }Now, as for a solution that's more along the lines of what you were trying to do... What you need to do is get away from HTML
<img>tags. Instead, your sliding elements should be<div>'s with a CSS background image. In this way, in your media queries you can change the background image of the<div>'s. I am unsure whether or not the slider you are using can support this, some are dependent on sliding an actual HTML<img>tag. Some can slide whatever you want. You should be able to manage what I've described with Flexslider (a quick google search will get you where you need to be).