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

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

首先在这里和工作伟大

第二个是底部滑块

它会产生越来越多的行(因为我向滑块添加了新项目),但我需要的是它将在一行中仅显示4个幻灯片(我不需要其他行).

这是它在代码中的样子

    

        

            

                

                    

                    

                        Item text 1
                    
                
                

                    

                    

                        Item text 2
                    
                
                

                    

                    

                        Item text 3
                    
                
                

                    

                    

                        Item text 4
                    
                
                

                    

                    

                        Item text 5
                    
                
                

                    

                    

                        Item text 6
                    
                
                

                    

                    

                        Item text 7
                    
                
                

            
        
    

这就是我在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
  });
});

zer00ne.. 5

变化

滑块显示如此多幻灯片的原因是因为您将bxSlider分配给

只有一个巨大的滑块
• .解决这个问题:

  删除

  和

  • 重新分配bxSlider插件

    指定

    为幻灯片.看到slideSelector

    在CSS .main-content中使用,但在HTML中有一个.popular-slider.我换

    了

    .没有这个修复,你的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现在处于第一位置

    第三步:幻灯片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;
}

  

    

      
      

      

        Item text 1
      
    
    

      
      

      

        Item text 2
      
    
    

      
      

      

        Item text 3
      
    
    

      
      

      

        Item text 4
      
    
    

      
      

      

        Item text 5
      
    
    

      
      

      

        Item text 6
      
    
    

      
      

      

        Item text 7
      
    
    

      
      

      

        Item text 8
      
    
    

  

$(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;
}

  

    

      
      

      

        Item text 1
      
    
    

      
      

      

        Item text 2
      
    
    

      
      

      

        Item text 3
      
    
    

      
      

      

        Item text 4
      
    
    

      
      

      

        Item text 5
      
    
    

      
      

      

        Item text 6
      
    
    

      
      

      

        Item text 7
      
    
    

      
      

      

        Item text 8