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

Question

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

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

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

Answer 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>

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

How to show 5 images in a 2 row slider with bxslider

javascript

css

jquery

carousel

bxslider