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

Question

我的页面上有 Bxslider 和两个 slider

首先在这里和在工作伟大

第二个是底部 slider

它会生成越来越多的行(因为我向 slider 添加了新元素)，但我所需要的是它只会在一行中显示 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

变化

1. 您的 slider 显示这么多幻灯片的原因是您将 bxSlider 分配给了 <ul>只有一个巨大的<li> .要解决此问题:

   • 已删除 <ul class="bxslider">和 <li>

   • 将 bxSlider 插件重新分配给 <div class="popular">

   • 指定每个<div class="item">作为幻灯片。参见 slideSelector

2. 在 CSS 中 .main-content使用，但在 HTML 中有一个 .popular-slider .我改了<div class="popular-slider">至 <div class="main-content"> .如果没有此修复，您的所有 CSS 都无法正常工作。

3. 为了一次显示 4 张幻灯片，使用了以下 bxSlider 选项:

   • minSlides: 4 通过...锁定幻灯片数量

   • maxSlides: 4 ...将相同的号码分配给...

   • moveSlides: 4 ...这三个选项。在你的例子中，它是 4。

   • slideWidth: 200 ...当您创建轮播(一次显示多张幻灯片的 slider )时，您需要使用 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>