Making responsive slider with BXslider's minslide and maxslide

Question

So, bxslider is working great and is responsive until I try to set up multiple slides (3) with for wider resolutions. Once I try setting up minslide and maxslide options, everything stays the same.

I've tried this basic conditional code

if ($(window).width() < 600) {
    $('.prodslide').bxSlider();
} else {
    $('.prodslide').bxSlider({
        minSlides: 3,
        maxSlides: 3
    });
}

I've also looked up somewhere version with variables that looked like this

var slidesvar;
if ($(window).width() < 600) {
  slidesvar = 1;
} else {
    slidesvar = 3;
}


$('.prodslide').bxSlider({
   minSlides: slidesvar,
   maxSlides: slidesvar
});

Neither works.

And the only errors I get in console are google doubleclick related.

Answer 1

If you are using the default mode: carousel you have set slideWidth as well. If you want a breakpoint at 600px, then set slideWidth: 200.

var bx = $('.bx').bxSlider({
  minSlides: 1,
  maxSlides: 3,
  slideWidth: 200,
  shrinkItems: true
});

<link href="https://cdn.jsdelivr.net/bxslider/4.2.12/jquery.bxslider.css" rel="stylesheet">

<ul class='bx'>
  <li><img src='http://lorempixel.com/200/200/people/1'></li>
  <li><img src='http://placehold.it/200x200/000/fff?text=2'></li>
  <li><img src='http://lorempixel.com/200/200/people/2'></li>
  <li><img src='http://placehold.it/200x200/0ff/000?text=4'></li>
  <li><img src='http://lorempixel.com/200/200/people/3'></li>
  <li><img src='http://placehold.it/200x200/83d800/000?text=6'></li>
  <li><img src='http://lorempixel.com/200/200/people/4'></li>
  <li><img src='http://placehold.it/200x200/f7a/000?text=8'></li>
  <li><img src='http://lorempixel.com/200/200/people/5'></li>
  <li><img src='http://placehold.it/200x200/fc0/000?text=10'></li>
  <li><img src='http://lorempixel.com/200/200/people/7'></li>
  <li><img src='http://placehold.it/200x200/f00/fff?text=12'></li>
</ul>

<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.12/jquery.bxslider.min.js'></script>