javascript - BxSlider 最小和最大幻灯片不起作用

Question

我的 中大约有 10-15 张幻灯片。

最大幻灯片数为 4，但仅显示 1 张幻灯片。页面加载时， slider “闪烁”，并显示 4 张幻灯片，但之后又显示一张幻灯片。

slider 出了什么问题？感谢您的帮助!

您可以在此处查看问题:Click

<div class="home-slider-wrapper">
              <?php
              $get_slides = mysqli_query($kapcs, "SELECT * FROM slideshow WHERE slide_status = 1 ORDER BY slide_sorrend ASC");
              if(mysqli_num_rows($get_slides) > 0 )
              {
                  echo '<ul class="bxslider">';
                    while($slide = mysqli_fetch_assoc($get_slides))
                    {
                        if($slide['slide_link'] == "" )
                        {
                            echo '<li><img src="'.$host.'/images/homepage_slideshow/'.html($slide['slide_img']).'" title="'.html($slide['slide_cim']).'" /></li>';
                        }
                        else
                        {
                            echo '<li><a href="'.html($slide['slide_link']).'" title="'.html($slide['slide_cim']).'" target="'.html($slide['slide_link_target']).'"><img src="'.$host.'/images/homepage_slideshow/'.html($slide['slide_img']).'" title="'.html($slide['slide_cim']).'" /></a></li>';
                        }
                    }
                  echo '</ul>';
              }
              ?>
            </div>


$('.kiemelt_termekek_slider').bxSlider({
  auto: true,   
  mode: 'horizontal',
  captions: false,
  minSlides: 4
  //maxSlides: 4    
});

Answer 1

这里的问题是您缺少“slideWidth”。试试这个:

$('.kiemelt_termekek_slider').bxSlider({
    minSlides: 4,
    maxSlides: 4, 
    auto: true,   
    mode: 'horizontal', // This is default so you don't need it
    captions: false,
    slideWidth: 365, // This is your missing link.  Change this to the width of the slide you want and bxslider will do the appropriate calculation
  });

注意:我已在代码中标记为“模式”已默认为“水平”(根据此处的文档):

BX Slider Options

编辑:上面的代码将其显示为选择器:

                  echo '<ul class="bxslider">';

如果您真正的目标是“kiemelt_termekek_slider”，则需要将其更改为“kiemelt_termekek_slider”。或者将您的 jQuery 更改为以下内容:

$('.bxslider').bxSlider({
    minSlides: 4,
    maxSlides: 4, 
    auto: true,   
    mode: 'horizontal', // This is default so you don't need it
    captions: false,
    slideWidth: 365, // This is your missing link.  Change this to the width of the slide you want and bxslider will do the appropriate calculation
  });