如何使用 Bxslider 连续显示 4 张幻灯片

Question

我的页面上有 Bxslider 和两个滑块

第一次在这里和以后都很棒

第二个是底部滑块

它使行越来越多（因为我向滑块添加了新项目），但我需要的是它只会在一行中显示 4 张幻灯片（我不需要其他行）。

代码如下

<div class="popular-slider">
    <ul class="bxslider">
        <li>
            <div class="popular">
                <div class="item">
                    <img src="img/popular1.jpg"><br>
                    <p>
                        <a href="#">Item text 1</a>
                    </p>
                </div>
                <div class="item">
                    <img src="img/popular2.jpg"><br>
                    <p>
                        <a href="#">Item text 2</a>
                    </p>
                </div>
                <div class="item">
                    <img src="img/popular3.jpg"><br>
                    <p>
                        <a href="#">Item text 3</a>
                    </p>
                </div>
                <div class="item">
                    <img src="img/popular4.jpg"><br>
                    <p>
                        <a href="#">Item text 4</a>
                    </p>
                </div>
                <div class="item">
                    <img src="img/popular4.jpg"><br>
                    <p>
                        <a href="#">Item text 5</a>
                    </p>
                </div>
                <div class="item">
                    <img src="img/popular4.jpg"><br>
                    <p>
                        <a href="#">Item text 6</a>
                    </p>
                </div>
                <div class="item">
                    <img src="img/popular4.jpg"><br>
                    <p>
                        <a href="#">Item text 7</a>
                    </p>
                </div>
                <div class="clear"></div>
            </div>
        </li>
    </ul>
</div>

这是我在 css

中的内容

.main-content .popular {
  background: #fff;
}
.main-content .popular .item {
  float: left;
  width: 25%;
  text-align: center;
  position: relative;
  padding-bottom: 20px;
}
.main-content .popular .item:after {
  content: "";
  width: 2px;
  height: 100%;
  background: #f5f5f5;
  position: absolute;
  right: 0;
  top: 0;
}
.main-content .popular .item p {
  text-align: left;
  padding-left: 20px;
}
.main-content .popular .item p a {
  font-size: 16px;
  color: #414a56;
}

这是我的 bxslider 代码

$(function(){
  $('.bxslider').bxSlider({
    auto: true,
    autoControls: true,
    speed: 500
  });
});

Answer 1

用js写：

$('.bxslider').bxSlider({
  minSlides: 2,
  maxSlides: 2,
  slideWidth: 360,
  slideMargin: 10
});

Answer 2

我对您的 HTML 结构做了一些微调。请看下面：

<div class="popular-slider bx-viewport">
<div class="bx-controls-direction"><a class="bx-prev" href="">Prev</a><a class="bx-next" href="">Next</a></div>
<ul class="bxslider">
    <li>
        <div class="popular">
            <div class="item"> <img src="img/popular1.jpg">
                <br>
                <p> <a href="#">Item text 1</a> </p>
            </div>
        </div>
    </li>
    <li>
        <div class="popular">
            <div class="item"> <img src="img/popular2.jpg">
                <br>
                <p> <a href="#">Item text 2</a> </p>
            </div>
        </div>
    </li>
    <li>
        <div class="popular">
            <div class="item"> <img src="img/popular3.jpg">
                <br>
                <p> <a href="#">Item text 3</a> </p>
            </div>
        </div>
    </li>
    <li>
        <div class="popular">
            <div class="item"> <img src="img/popular4.jpg">
                <br>
                <p> <a href="#">Item text 4</a> </p>
            </div>
        </div>
    </li>
    <li>
        <div class="popular">
            <div class="item"> <img src="img/popular4.jpg">
                <br>
                <p> <a href="#">Item text 5</a> </p>
            </div>
        </div>
    </li>
    <li>
        <div class="popular">
            <div class="item"> <img src="img/popular4.jpg">
                <br>
                <p> <a href="#">Item text 6</a> </p>
            </div>
        </div>
    </li>
    <li>
        <div class="popular">
            <div class="item"> <img src="img/popular4.jpg">
                <br>
                <p> <a href="#">Item text 7</a> </p>
            </div>
            <div class="clear"></div>
        </div>
    </li>
</ul></div>

bxslider JS 文件中需要有一个小的值更改：

// CAROUSEL
    minSlides: 4,
    maxSlides: 4,
    moveSlides: 4,
    slideWidth: 300,

根据您的布局调整 slideWidth 值。希望这可以帮助！！

Answer 3

变化

您的滑块显示这么多幻灯片的原因是因为您将 bxSlider 分配给了只有一个巨大 <li> 的 <ul>。要解决此问题：
- 删除了<ul class="bxslider">和<li>
- 已将 bxSlider 插件重新分配给 <div class="popular">
- 将每个 <div class="item"> 指定为幻灯片。参见 slideSelector
在CSS中使用了.main-content，而在HTML中却有一个.popular-slider。我将 <div class="popular-slider"> 更改为 <div class="main-content">。如果没有此修复，您的 CSS 中的 none 会起作用。
为了一次显示 4 张幻灯片，使用了以下 bxSlider 选项：
- minSlides: 4 锁定幻灯片数量...
- maxSlides: 4 ...将相同的数字分配给...
- moveSlides: 4 ...这三个选项。在你的例子中，它是 4.
- slideWidth: 200 ...创建轮播（一次显示多张幻灯片的滑块）时，需要使用slideWidth选项。
- 关于轮播还有一件事不是很明显，您应该注意。在确定您需要的幻灯片数量时使用这个简单的规则：将您计划拥有的总数除以您打算一次显示的幻灯片数量。如果结果是一个整数（例如 1、2、3...），那么就可以了。在您的情况下，您应该有 4（但这很无聊）、8、12、16、20...原因是如果您的轮播有 7 张幻灯片（我添加了第 8 张幻灯片），那么它不会停止或暂停幻灯片一致：
  - 第一步：幻灯片 5 现在位于第一个位置
  - 第二步：幻灯片 2 现在位于第一个位置
  - 第三步：幻灯片 6 现在位于第一个位置

片段

$(function() {
  $('.popular').bxSlider({
    auto: true,
    autoControls: true,
    speed: 500,
    slideSelector: 'div.item',
    minSlides: 4,
    maxSlides: 4,
    moveSlides: 4,
    slideWidth: 200


  });
});

.main-content .popular {
  background: #fff;
}
.main-content .popular .item {
  float: left;
  width: 25%;
  text-align: center;
  position: relative;
  padding-bottom: 20px;
}
.main-content .popular .item:after {
  content: "";
  width: 2px;
  height: 100%;
  background: #f5f5f5;
  position: absolute;
  right: 0;
  top: 0;
}
.main-content .popular .item p {
  text-align: left;
  padding-left: 20px;
}
.main-content .popular .item p a {
  font-size: 16px;
  color: #414a56;
}

<link rel="stylesheet" href="https://cdn.jsdelivr.net/bxslider/4.2.5/jquery.bxslider.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/bxslider/4.2.5/jquery.bxslider.min.js"></script>
<div class="main-content">

  <div class="popular">
    <div class="item">
      <img src="https://placeimg.com/200/150/nature">
      <br>
      <p>
        <a href="#">Item text 1</a>
      </p>
    </div>
    <div class="item">
      <img src="https://placeimg.com/200/150/arch">
      <br>
      <p>
        <a href="#">Item text 2</a>
      </p>
    </div>
    <div class="item">
      <img src="https://placeimg.com/200/150/nature">
      <br>
      <p>
        <a href="#">Item text 3</a>
      </p>
    </div>
    <div class="item">
      <img src="https://placeimg.com/200/150/arch">
      <br>
      <p>
        <a href="#">Item text 4</a>
      </p>
    </div>
    <div class="item">
      <img src="https://placeimg.com/200/150/nature">
      <br>
      <p>
        <a href="#">Item text 5</a>
      </p>
    </div>
    <div class="item">
      <img src="https://placeimg.com/200/150/arch">
      <br>
      <p>
        <a href="#">Item text 6</a>
      </p>
    </div>
    <div class="item">
      <img src="https://placeimg.com/200/150/nature">
      <br>
      <p>
        <a href="#">Item text 7</a>
      </p>
    </div>
    <div class="item">
      <img src="https://placeimg.com/200/150/arch">
      <br>
      <p>
        <a href="#">Item text 8</a>
      </p>
    </div>
    <div class="clear"></div>
  </div>

</div>

如何使用 Bxslider 连续显示 4 张幻灯片

How to show Only 4 slides in a row using Bxslider

jquery

html

css

bxslider

变化

片段