bxslider 在移动设备上显示多于 1 个图像

Question

我在这个网站上使用bxslider，我正在尝试编辑移动设备滑块上显示的图像数量 (site here)，从 1 到 3（从 768 像素到 320 像素）。我想我找对地方了，但我不确定如何更改显示的幻灯片数。

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来计算。