How to show Only 4 slides in a row using Bxslider

Question

I have Bxslider on my page and two sliders

First here and in works great

Second here is bottom slider

It makes more and more rows (since i add new items to slider), but all i need is that it will show only 4 slides in a single row (i don't need another rows).

Here how it looks in code

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

Here what I have in 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;
}

Here is my bxslider code

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

Solution 1

Changes

1. The reason why your slider was showing so many slides is because you assigned the bxSlider to a <ul> that had only one huge <li>. To fix this:

   • Removed <ul class="bxslider"> and <li>

   • Reassigned bxSlider plugin to <div class="popular">

   • Designated each <div class="item"> as a slide. See slideSelector

2. In CSS .main-content is used, yet in the HTML there is a .popular-slider. I changed <div class="popular-slider"> to <div class="main-content">. Without this fix, none of your CSS would work.

3. Used the following bxSlider options in order to display 4 slides at a time:

   • minSlides: 4 Lock the number of slides by...

   • maxSlides: 4 ...assigning the same number to...

   • moveSlides: 4 ...these three options. In your case, it's 4.

   • slideWidth: 200 ...When you create a carousel (a slider showing more than one slide at a time), you are required to specify the width of a single slide by using the slideWidth option.

   • There's one more thing that's not very obvious about carousels you should be aware of. Use this simple rule when determining the number of slides you'll need: divide the total you plan to have by the number of slides you intend to display at a time. If the result is a whole number (e.g. 1, 2, 3...), then it's ok. In your case you should have 4 (but that's boring), 8, 12, 16, 20... The reason why is if your carousel had 7 slides (I added the 8th slide), then it wouldn't stop or pause on the slides consistently:

     • 1st move: slide 5 is now in the first position
     • 2nd move: slide 2 is now in the first position
     • 3rd move: slide 6 is now in the first position

Snippet

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

Solution 2

Write in js:

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

Solution 3

I have made some slight tweaks to your HTML structure. Please see below:

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

There need to be a small value change in the bxslider JS file :

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

Adjust your slideWidth value as per your layout. Hope this helps!!