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

我的页面上有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
  });
});

变化

>滑块显示这么多幻灯片的原因是因为您将bxSlider分配给< ul>只有一个巨大的< li>.解决这个问题：

>删除< 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都不会起作用.
>使用以下bxSlider选项以一次显示4张幻灯片：

> minSlides: 4通过……锁定幻灯片的数量
> maxSlides: 4 …为…分配相同的号码
> moveSlides: 4 ……这三个选项.在你的情况下,它是4.
> slideWidth: 200 …当您创建轮播(一次显示多张幻灯片的滑块)时,您需要使用slideWidth选项指定单张幻灯片的宽度.
>关于你应该注意的旋转木马,还有一件事情不是很明显.在确定您需要的幻灯片数量时,请使用此简单规则：将您计划的总数除以您希望一次显示的幻灯片数量.如果结果是一个整数(例如1,2,3 ……),那就没关系.在你的情况下你应该有4(但那很无聊),8,12,16,20 …原因是如果你的旋转木马有7张幻灯片(我添加了第8张幻灯片),那么它就不会停止或暂停幻灯片始终如一：

>第一步：幻灯片5现在处于第一位置
>第二步：幻灯片2现在处于第一位置
>第3步：幻灯片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="http://img.558idc.com/uploadfile/allimg/210615/22195161Y-8.jpg"></script>
<div class="main-content">

  <div class="popular">
    <div class="item">
      <img src="http://img.558idc.com/uploadfile/allimg/210615/22195125Y-9.jpg">
      <br>
      <p>
        <a href="#">Item text 1</a>
      </p>
    </div>
    <div class="item">
      <img src="http://img.558idc.com/uploadfile/allimg/210615/2219513N0-10.jpg">
      <br>
      <p>
        <a href="#">Item text 2</a>
      </p>
    </div>
    <div class="item">
      <img src="http://img.558idc.com/uploadfile/allimg/210615/22195125Y-9.jpg">
      <br>
      <p>
        <a href="#">Item text 3</a>
      </p>
    </div>
    <div class="item">
      <img src="http://img.558idc.com/uploadfile/allimg/210615/2219513N0-10.jpg">
      <br>
      <p>
        <a href="#">Item text 4</a>
      </p>
    </div>
    <div class="item">
      <img src="http://img.558idc.com/uploadfile/allimg/210615/22195125Y-9.jpg">
      <br>
      <p>
        <a href="#">Item text 5</a>
      </p>
    </div>
    <div class="item">
      <img src="http://img.558idc.com/uploadfile/allimg/210615/2219513N0-10.jpg">
      <br>
      <p>
        <a href="#">Item text 6</a>
      </p>
    </div>
    <div class="item">
      <img src="http://img.558idc.com/uploadfile/allimg/210615/22195125Y-9.jpg">
      <br>
      <p>
        <a href="#">Item text 7</a>
      </p>
    </div>
    <div class="item">
      <img src="http://img.558idc.com/uploadfile/allimg/210615/2219513N0-10.jpg">
      <br>
      <p>
        <a href="#">Item text 8</a>
      </p>
    </div>
    <div class="clear"></div>
  </div>

</div>