Question

在测试各种响应式jquery滑块后，我决定使用bxslider。由于一个我不知道如何解决的问题，我现在迷路了。我希望我的bxslider（版本4.1）位于我页面的右侧

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
    }); 
});

如果我将float：left添加到#slideshow，那么会发生一件奇怪的事情，所有的图像都是用小拇指加载的。显然，bxslider没有关于图像大小的信息。如果我给第一个元素的ul.bxslider宽度和高度，那么它可以工作，但是再次没有resposivness（幻灯片不缩放）

问题：

我的图像宽度为500px，如果我给#slideshow width = 500px，那么我也会放松响应。这就是为什么我使用：max-width：500px。

浏览器是：chrome，
图片的格式相同（500x356）JPG
最新版本的稳定jquery：10.1最新版本的bxslider：4.1
在只有2个元素浮动的小型创建网站上进行测试（约＆amp;幻灯片）

Answer 1

我遇到了同样的问题，但无论大小/视口等等，它都没有响应。

我喜欢bxSlider所以我在源头寻找了一段时间，发现这是一个css问题..你必须补充：

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

它对我有用。我希望这能为你解决这个问题。

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

Answer 2

在我的情况下，当我使用它工作的未压缩文件时，由于js“jquery.bxslider.min.js”的压缩版本。滑块响应未压缩的文件，因此压缩必定会毁掉一些东西。

Answer 3

我在其他滑块插件中遇到同样的问题，在浮动元素中包裹时失去了响应能力。在我的例子中，解决方案是添加：

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

所以最初，你的样式中某处浮动包含幻灯片的元素，但是当视口小于600px时，滑块不需要保持在右侧（由于宽度较小），移除浮动，再次回复响应。

Answer 4

CSS ：

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

Answer 5

我刚才有一个与bxslider类似的问题并且不知道如何解决，

我的意思是使用elastislider link

对我来说，它适用于大图像，并且响应式设计没有任何问题。

它易于实现，您可以根据需要更改.css文件中的样式

Answer 6

我也遇到了问题，我通过在滑块的幻灯片li元素上设置一个非常高的宽度来解决它。

然后，

bxSlider会自动为幻灯片设置一个合适的值。

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

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

6 个答案: