bxslider 在手机上显示超过 1 张图片

Question

我正在使用 bxslider on this site and I am trying to edit the number of images to be shown on the slider on mobile (site here)，从 1 到 3（从 768px 到 320px）。我想我找对了地方，但我不确定如何更改显示的幻灯片数量。

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

Answer 1

您需要在 bxSlider 设置中将 minSlides 设置为 3，将 maxSlides 设置为 6。这将确保无论屏幕尺寸如何，始终显示 3 张幻灯片，而在更大的屏幕尺寸上最多显示 6 张。 slideWidth 设置有一些相互作用。这可能应该被称为 slideMAXWidth 因为它控制幻灯片的最大宽度，而不是它的实际宽度。实际宽度将根据屏幕尺寸和minSlides.

计算

bxslider 在手机上显示超过 1 张图片

bxslider show more than 1 image on mobile

javascript

jquery

carousel

bxslider