How to show 5 images in a 2 row slider with bxslider

I am trying to make an image slider with bxslider. I want to make it a 2 row slider with 5 images showing in each row. The problem is when I add all the code to HTML, CSS and JavaScript everything falls apart

I have tried to make a slider on the left side of the page and add some text on the right side next to the slider but nothing is working. My slider keeps showing my images on one slide in a column and the other slide in a row.

 $(document).ready(function(){
      $('.wraper').bxSlider({
        minSlides: 1,
        maxSlides: 5,
        mode: 'fade',
        adaptiveHeight: true
      });
    });

Solution

You need to use the slideWidth and mode:'horizontal' along with the minSlides and maxSlides to show 5 slides in a single row, although you cant display 2 rows on a single slide, the plugin does not support it.

For a single row with 5 images to be displayed at a time see below

$(document).ready(function() {
  var a = $('.slider').bxSlider({
    minSlides: 1,
    maxSlides: 5,
    mode: 'horizontal',
    adaptiveHeight: true,
    slideWidth: 100,
    moveSlides: 5,
  });
});

<link rel="stylesheet" href="https://cdn.jsdelivr.net/bxslider/4.2.12/jquery.bxslider.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/bxslider/4.2.12/jquery.bxslider.min.js"></script>



<div class="slider">
  <div><img src="https://static-s.aa-cdn.net/img/ios/982172572/5070580cca87408d911344542276639c?v=1"></div>
  <div><img src="https://static-s.aa-cdn.net/img/ios/982172572/5070580cca87408d911344542276639c?v=1"></div>
  <div><img src="https://static-s.aa-cdn.net/img/ios/982172572/5070580cca87408d911344542276639c?v=1"></div>
  <div><img src="https://static-s.aa-cdn.net/img/ios/982172572/5070580cca87408d911344542276639c?v=1"></div>
  <div><img src="https://static-s.aa-cdn.net/img/ios/982172572/5070580cca87408d911344542276639c?v=1"></div>
  <div><img src="https://static-s.aa-cdn.net/img/ios/982172572/5070580cca87408d911344542276639c?v=1"></div>
  <div><img src="https://is1-ssl.mzstatic.com/image/thumb/Purple60/v4/0b/b7/73/0bb7737a-db83-87bf-f10e-20d0bed3a496/source/256x256bb.jpg"></div>
</div>