11

在测试了各种响应式 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 宽度和高度，那么它可以工作，但再次没有响应（幻灯片不缩放）

侧面问题：

我的图像是 500px 宽，如果我给 #slideshow width=500px 那么我也会失去响应。这就是我使用的原因：最大宽度：500px。

  • 浏览器是：chrome，
  • 图片均为相同格式 (500x356) JPG
  • 稳定 jquery 的最新版本：10.1 bxslider 的最新版本：4.1
  • 在只有这 2 个元素浮动的小型创建站点上进行了测试
    （关于和幻灯片）
4

6 回答 6

9

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

我喜欢 bxSlider，所以我在源代码中搜索了一段时间，发现这是一个 css 问题.. 你必须添加：

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

它对我有用。我希望这为您解决了问题。

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

于 2013-09-25T16:18:25.993 回答
7

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

于 2014-06-02T07:57:55.650 回答
3

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

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

因此，最初，在您的样式中某处浮动包含幻灯片的元素，但是当您的视口小于 600 像素时，滑块无需保持在右侧（由于宽度较小），移除浮动，返回反应能力又回来了。

于 2013-05-30T13:10:02.067 回答
1

CSS：

.bx-wrapper img {
 display:block;
 max-width: 100%;
 height:auto;
}
于 2014-09-04T07:09:27.943 回答
0

前段时间我遇到了一个与bxslider类似的问题，不知道如何解决，

我的建议是使用 elastislider链接

它适用于我的大图像，响应式设计没有问题。

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

于 2013-05-29T16:39:26.677 回答
0

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

然后 bxSlider 将自动为幻灯片设置适当的值。

li {
  width: 10000px; // inital width, bxSlider sets its own
  display: block;
}
li img {
  max-width: 100%;
}
于 2014-08-07T14:40:55.697 回答