Question

我在此网站上使用bxslider，我正在尝试编辑要在移动设备（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张图片

1 个答案: