Как показать только 4 слайдов в строке с помощью Bxslider

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

Изменения

1. Причина, почему ваш слайдер показывал так много слайдов, потому что вы назначили на 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. Использовали следующие параметры bxSlider для того, чтобы отобразить 4 слайдов в то время:

   • minSlides: 4 Блокировка количества слайдов с помощью ...

   • maxSlides: 4 ... назначая тот же номер ...

   • moveSlides: 4 ... эти три варианта. В вашем случае это 4.

   • slideWidth: 200 ... При создании карусель (ползунок, показывающий более чем одного слайда за один раз), вы должны указать ширину одного слайда с помощью опции slideWidth ,

   • Есть еще одна вещь, которая не очень очевидна в отношении каруселей, о которых вы должны знать. Используйте это простое правило при определении количества слайдов, которые вам понадобятся: разделите общее количество, которое вы планируете иметь на количество слайдов, которые вы собираетесь отображать за раз. Если результатом является целое число (например, 1, 2, 3 ...), тогда все в порядке. В вашем случае у вас должно быть 4 (но это скучно), 8, 12, 16, 20 ... Причина в том, что если ваша карусель имела 7 слайдов (я добавил 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; 
 
}

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

Answer 2

Написать в ЯШ:

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

Answer 3

Я немного подделал вашу структуру 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 согласно макету. Надеюсь это поможет!!