jQuery 当幻灯片包含在浮动元素中时，bxslider 不响应
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16819069/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
bxslider NOT responsive when slides are wrapped inside a floated element
提问by PathOfNeo
After testing various responsive jquery sliders, i have decided to go with bxslider. I am lost now due to a problem which i don't know how to solve. I want my bxslider (version 4.1) to be on the right side of my page
在测试了各种响应式 jquery 滑块后，我决定使用 bxslider。由于一个我不知道如何解决的问题，我现在迷路了。我希望我的 bxslider（4.1 版）在我的页面右侧
html:
html:
<div id="about">
<h2>My Title</h2>
<p>...Some Text...</p>
</div>
<div id="slideshow">
<ul class="bxslider">
<li><img src="img/slide_1.jpg"></li>
<li><img src="img/slide_2.jpg"></li>
<li><img src="img/slide_3.jpg"></li>
<li><img src="img/slide_4.jpg"></li>
</ul>
</div>
css:
css：
#about{
width:400px;
float:left;
}
#slideshow{
max-width:500px;
float:left; /* IF I REMOVE THIS LINE, SLIDER IS WORKING CORRECTLY - RESPONSIVE */
}
js:
js：
$(document).ready(function() {
$('.bxslider').bxSlider({
controls: false,
auto: true
});
});
If i add float:left to #slideshow, then a strange thing happens, all the images are in small thumbs loaded. Obviously bxslider doesn't have info about the image sizes. If i give the ul.bxslider width and height about the first element, then it works, but again no resposivness (slides not scaling)
如果我将 float:left 添加到 #slideshow，那么会发生一件奇怪的事情，所有图像都以小拇指加载。显然 bxslider 没有关于图像大小的信息。如果我给出第一个元素的 ul.bxslider 宽度和高度，那么它可以工作，但同样没有响应性（幻灯片不缩放）
Side problem:
侧面问题：
My images are 500px wide, if i give #slideshow width=500px then i also loose responsivness. Thats why i use: max-width:500px.
我的图像宽度为 500 像素，如果我给 #slideshow width=500px 那么我也会失去响应性。这就是为什么我使用：max-width:500px。
- Browser is: chrome,
- Pictures are all of the same format (500x356) JPG
- Latest version of stable jquery: 10.1 Latest version of bxslider: 4.1
- Tested on small created site with only those 2 elements floating
(about & slideshow)
- 浏览器是：chrome，
- 图片都是相同的格式 (500x356) JPG
- 最新版本的稳定 jquery：10.1 最新版本的 bxslider：4.1
- 在只有这 2 个元素浮动的小型创建站点上进行测试
（关于和幻灯片）
采纳答案by m33bo
I had the same issue however it didn't do anything responsively no matter what the size/viewport etc.
我遇到了同样的问题，但是无论大小/视口等如何，它都没有做出任何响应。
I like bxSlider so I hunted around source, for a while and found that it was a css issue.. you have to add:
我喜欢 bxSlider，所以我在源代码周围搜索了一段时间，发现这是一个 css 问题..你必须添加：
.bx-wrapper img{
display:block;
max-width: 100%;
}
and it worked for me. I hope that this fixed it for you.
它对我有用。我希望这为你解决了这个问题。
NB: This may be fixed in a different version.
注意：这可能会在不同的版本中修复。
回答by ckhawand
In my case it was due to the compressed version of the js "jquery.bxslider.min.js" when I used the uncompressed file it worked. The slider is responsive with the uncompressed file so the compression must have ruined something.
在我的情况下，这是由于当我使用它工作的未压缩文件时，js“jquery.bxslider.min.js”的压缩版本。滑块对未压缩的文件做出响应，因此压缩肯定会破坏某些内容。
回答by PathOfNeo
The same problem i see with other slider plugins, losing their responsiveness when wrapped inside a floated element. The solution, in my case, was to add:
我在其他滑块插件中看到了同样的问题，当包裹在浮动元素中时会失去响应能力。就我而言，解决方案是添加：
@media screen and (max-width: 600px) {
#slideshow {
float:none;
}
}
So initially, somewhere in your styles you floated the element which contains the slides, but when you viewport is less than 600px, there's no need for the slider to maintain on the right side (due to smaller width), removing the float, return the responsiveness back again.
因此，最初，在样式中的某处浮动包含幻灯片的元素，但是当您的视口小于 600px 时，滑块无需保持在右侧（由于宽度较小），移除浮动，返回反应能力又回来了。
回答by Sebin Simon
CSS:
CSS:
.bx-wrapper img {
display:block;
max-width: 100%;
height:auto;
}
回答by MonkeyVoodoo
I had the problem as well, and I solved it with setting an initial very high width on the slide lielements of the slider.
我也遇到了这个问题，我通过li在滑块的滑动元素上设置一个非常高的初始宽度来解决它。
bxSlider will then automatically set an appropriate value for the slides.
bxSlider 然后会自动为幻灯片设置适当的值。
li {
width: 10000px; // inital width, bxSlider sets its own
display: block;
}
li img {
max-width: 100%;
}
回答by user2232273
i had a few time ago a similiar problem with the bxslider and dont know how to solve,
前段时间我遇到了 bxslider 的类似问题，不知道如何解决，
my sugesstion is use elastislider link
我的建议是使用弹性滑块链接
it works for me with large images and no problems with the responsive design.
它适用于大图像并且响应式设计没有问题。
it is easy to implement and you can change the style in the .css files how you want
它很容易实现，您可以根据需要更改 .css 文件中的样式
