How to show Only 4 slides in a row using Bxslider

jquery html css bxslider
ildar picture ildar · Dec 23, 2015 · Viewed 13k times · Source

I have Bxslider on my page and two sliders

First here and in works great

Top Slider

Second here is bottom slider

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
  });
});

Answer

zer00ne picture zer00ne · Dec 23, 2015

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>

Related questions

Adaptive bxSlider width or center image

I have a slideshow with pictures of many different aspect ratios. I would like the images to be centered in the slideshow. How can I do this, or even better, how can I automatically resize the slider?

Read More
Horizontally centering the active image of a bxSlider carousel with a seamless loop?

I want to make a really simple seamlessly-looping carousel and have tried using bxSlider, but am encountering an issue where my images are off-center. I have 3 x 1000px wide images and all I want to do is ensure the active …

Read More
Slide right to left?

How can I have a div go from collapsed to expanded (and vice versa), but do so from right to left? Most everything I see out there is always left to right.

Read More