当幻灯片被包裹在浮动元素中时，bxslider不响应

在测试了各种响应式jquery滑块后，我决定使用bxslider。由于我不知道如何解决的问题，现在我迷了路。我希望我的bxslider（版本4.1）是在我的页面的右侧当幻灯片被包裹在浮动元素中时，bxslider不响应

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：

#about{ 
    width:400px; 
    float:left; 
} 
#slideshow{ 
    max-width:500px; 
    float:left; /* IF I REMOVE THIS LINE, SLIDER IS WORKING CORRECTLY - RESPONSIVE */ 
}

JS：

$(document).ready(function() {     
    $('.bxslider').bxSlider({ 
     controls: false, 
     auto: true 
    }); 
});

如果我添加浮动：留给#slideshow，那么会发生一个奇怪的事情，所有的图像都在小拇指加载。很明显，bxslider没有关于图像大小的信息。如果我提供有关的第一个元素ul.bxslider宽度和高度，然后它的工作原理，但再无resposivness（幻灯片不结垢）

端问题：

我的图片宽500像素，如果我给#slideshow宽度= 500px然后我也松散responsivness。这就是为什么我使用：最大宽度：500px。

浏览器是：铬，
图片都是相同的格式（500x356），JPG
最新版本稳定的jQuery：10.1最新bxslider的版本：4.1
测试与小创建的网站只有2个元素浮动
（约&幻灯片）

来源

2013-05-29 PathOfNeo

我有同样的问题，但它没有做任何响应不管什么大小/视等

我喜欢bxSlider所以我找遍周围源，一会儿，发现这是一个问题的CSS ..你必须补充：

.bx-wrapper img{ 
    display:block; 
    max-width: 100%; 
}

它为我工作。我希望这能为你解决它。

注意：这可能会在不同的版本中修复。

来源

2013-09-25 16:18:25 m33bo

我有几个时间前与bxslider一个类似的问题，不知道如何解决，

我sugesstion是使用elastislider link

工作对我来说大的图像，并与响应式设计没有问题。

很容易实现，你可以改变的.css文件的样式要如何

来源

2013-05-29 16:39:26 user2232273

THX，但elastislider是一个旋转木马，而我只需要一个良好的简洁流畅的响应水平与分页子弹幻灯片。我尝试了flexslider，但由于滑块的加载速度缓慢，它有一个错误，您可以在开始时实际看到它闪烁。 – PathOfNeo

没问题..我尽力帮忙..对我来说它很好。 – user2232273

同样的问题，我与其他滑块插件看到，浮动元素里面裹在失去他们的响应。该解决方案，在我的情况，是添加：

@media screen and (max-width: 600px) { 
    #slideshow { 
     float:none; 
    } 
}

所以最初，在某处你的风格，你飘来包含幻灯片的元素，但是当你视口小于600px的，没有必要为滑块保持在右侧（由于宽度较小），移除浮动，再次返回响应。

来源

2013-05-30 13:10:02 PathOfNeo

在我的情况下，这是由于js“jquery.bxslider.min.js”的压缩版本，当我使用它的工作的未压缩文件。滑块对未压缩的文件作出响应，所以压缩必须破坏某些东西。

来源

2014-06-02 07:57:55 ckhawand

这是答案，使用了未压缩版本和宾果 –

这也适用于我。谢谢:) – Jeemusu

是的。这工作。 – rybo111

我也遇到了问题，我在滑块的滑块li的元素上设置了一个初始非常高的宽度来解决这个问题。

bxSlider会自动为幻灯片设置适当的值。

li { 
    width: 10000px; // inital width, bxSlider sets its own 
    display: block; 
} 
li img { 
    max-width: 100%; 
}

来源

2014-08-07 14:40:55 MonkeyVoodoo

CSS：

.bx-wrapper img { 
display:block; 
max-width: 100%; 
height:auto; 
}

来源

2014-09-04 07:09:27

当幻灯片被包裹在浮动元素中时，bxslider不响应

回答

相关问题