BxSlider 最小和最大幻灯片不起作用答案

【问题标题】：BxSlider min and max slides not workingBxSlider 最小和最大幻灯片不起作用
【发布时间】：2019-11-14 04:00:40
【问题描述】：

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

最大幻灯片为 4，但仅显示 1 张幻灯片。页面加载时，滑块“闪烁”，显示 4 张幻灯片，但之后再次显示一张幻灯片。

滑块有什么问题？感谢您的帮助！

你可以在这里看到问题：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    
});

【问题讨论】：

请显示代码，如果你想把它放在一个 jsfiddle（或你的问题中）让人们看到它的实际效果，而不是外部链接。
我用代码编辑了问题。
您在上面提供的代码中注释掉了 maxSlides 属性...
如果我评论它，或者从代码中删除最小和最大幻灯片，问题是一样的。

标签： javascript jquery bxslider

【解决方案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”。或者将您的 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
  });

【讨论】：

【解决方案2】：

基于他们在此处看到的示例 - http://bxslider.com/examples/carousel-static-number-slides

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

闪烁可能与您在图像中的加载方式有关。

【讨论】：

我看到幻灯片的动态数量的例子，但一切都是一样的。我不知道出了什么问题。
@TakácsZoltán 如果这不起作用，我猜这将是您在图像中加载的方式，滑块示例假定 <li> 已经在页面上呈现并且不考虑对于你在那里做的异步。
我在页面上有另一个滑块，在那里，我只显示图像，而不是 html 内容。这很好用，如果我从页面中删除该代码，并将滑块留在我的问题中，它仍然无法正常工作。而且我在控制台上没有任何错误。
@TakácsZoltán 在有效的滑块中，您是否使用异步调用来获取像这样无效的数据？
是的，图像和数据来自 sql width php，而不是 ajax。好吧，第二个滑块有效，但它不显示 4 个 div 并排显示，只显示一个 div。我用静态数据尝试了滑块，但它是一样的。您可以在此处查看滑块。 link上面的图片滑块工作正常，问题出在它下面。