Search code examples
javascriptjquerycarouselbxslider

bxslider show more than 1 image on mobile

I am using bxslider on this site and I am trying to edit the number of images to be shown on the slider on mobile (site here), from 1 to 3 (from 768px to 320px). I think I am looking in the right place, but I'm not sure how to change the # of slides shown.

HTML

<ul class="patient-slider">
   <?php
   $patients = get_post_meta($post->ID, 'ub_pmeta_1', true);
   foreach($patients as $patient){
   ?>
    <li><a href="<?php echo $patient['p_url']; ?>">
      <div class="thumbnail2">
        <p><img src="<?php echo $patient['p_image']; ?>" /></p>
        <div class="overlay">
          <h3><?php echo $patient['p_name']; ?></h3>
        </div>
      </div>
      </a></li>
    <?php } ?>  
  </ul>

jQuery

jQuery('.patient-slider').bxSlider({minSlides: 6,maxSlides: maxSlides ,moveSlides:1,slideWidth: 335,slideMargin: 1,pager : false });
Solution

  • You'll need to set minSlides to 3 and maxSlides to 6 in the bxSlider settings. That will ensure there are always 3 slides shown no matter the screen size and up 6 shown on larger screen sizes. There is some interplay with slideWidth setting. That should probably be called slideMAXWidth as it governs the max width for a slide, not its actual width. The actual width will be calculated based on the screen size and minSlides.