如何使用 bxslider 在 2 行滑块中显示 5 个图像答案

【问题标题】：How to show 5 images in a 2 row slider with bxslider如何使用 bxslider 在 2 行滑块中显示 5 个图像
【发布时间】：2019-08-17 11:40:13
【问题描述】：

我正在尝试使用 bxslider 制作图像滑块。我想让它成为一个 2 行滑块，每行显示 5 张图像。问题是当我将所有代码添加到 HTML、CSS 和 JavaScript 时，一切都崩溃了

我试图在页面左侧制作一个滑块，并在滑块旁边的右侧添加一些文本，但没有任何效果。我的滑块不断在一张幻灯片上显示我的图像，而另一张幻灯片则连续显示。

 $(document).ready(function(){
      $('.wraper').bxSlider({
        minSlides: 1,
        maxSlides: 5,
        mode: 'fade',
        adaptiveHeight: true
      });
    });

【问题讨论】：

我不明白你想要什么，另外你发布的这段代码与你想要的有什么关系。也尝试使用滑动滑块
@Learner 我想将两个 div 放置在一个相邻的位置，其中滑块位于左侧，文本位于右侧。我还想创建一个有 2 行的滑块，每行有 5 个图像。我发布的代码是针对 bxslider 属性的。
您一次可以显示 5 张图片，但您不能为这些图片创建 2 个不同的行，它只能是 5 张图片的一行
或者简单地说，一张幻灯片只能有一行只有 5 张图片，如果你愿意，我可以帮助你
@MuhammadOmerAslam 是的，如果你能提供帮助，我会很高兴

标签： javascript jquery css carousel bxslider

【解决方案1】：

需要slideWidth和mode:'horizontal'配合minSlides和maxSlides单行显示5张幻灯片，虽然不能单张显示2行，插件不支持它。

对于一次显示 5 张图像的单行，请参见下文

$(document).ready(function() {
  var a = $('.slider').bxSlider({
    minSlides: 1,
    maxSlides: 5,
    mode: 'horizontal',
    adaptiveHeight: true,
    slideWidth: 100,
    moveSlides: 5,
  });
});

<link rel="stylesheet" href="https://cdn.jsdelivr.net/bxslider/4.2.12/jquery.bxslider.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/bxslider/4.2.12/jquery.bxslider.min.js"></script>



<div class="slider">
  <div><img src="https://static-s.aa-cdn.net/img/ios/982172572/5070580cca87408d911344542276639c?v=1"></div>
  <div><img src="https://static-s.aa-cdn.net/img/ios/982172572/5070580cca87408d911344542276639c?v=1"></div>
  <div><img src="https://static-s.aa-cdn.net/img/ios/982172572/5070580cca87408d911344542276639c?v=1"></div>
  <div><img src="https://static-s.aa-cdn.net/img/ios/982172572/5070580cca87408d911344542276639c?v=1"></div>
  <div><img src="https://static-s.aa-cdn.net/img/ios/982172572/5070580cca87408d911344542276639c?v=1"></div>
  <div><img src="https://static-s.aa-cdn.net/img/ios/982172572/5070580cca87408d911344542276639c?v=1"></div>
  <div><img src="https://is1-ssl.mzstatic.com/image/thumb/Purple60/v4/0b/b7/73/0bb7737a-db83-87bf-f10e-20d0bed3a496/source/256x256bb.jpg"></div>
</div>

【讨论】：