Question

无论如何，我最近开始使用bxslider，我遇到了问题。

似乎在页面加载时错误地计算了其视口大小，这意味着它在移动设备，平板电脑等上无法正常工作。

奇怪的是，当我调整浏览器窗口的大小（即使只是一个像素）时，视口高度得到正确计算，一切看起来都很好。但是如果我刷新了具有相同高度和宽度的页面，则无法正确计算bx-viewport。

知道为什么会这样吗？

HTML看起来像这样（是的，我知道它可能与它没有任何关系，但仍然）：

<ul class="seminars-slider">
    <li>
        <article class="education-article">
            <h3><a href="#"> Sit tincidunt eros massa, lundium ultrices, sit in aliquet velit</a></h3>
            <p>LOL1</p>
            <div class="buttons">
                <a href="#" class="book-button"><span>Book now</span></a>
                <a href="#" class="read-more"><span>Read more</span></a>
            </div>
            <div class="clearall"></div>

        </article>
    <div class="clearall"></div>
    </li>

    // same li
    <li>
        <article class="education-article">
            <h3><a href="#"> Sit tincidunt eros massa, lundium ultrices, sit in aliquet velit</a></h3>
            <p>LOL1</p>
            <div class="buttons">
                <a href="#" class="book-button"><span>Book now</span></a>
                <a href="#" class="read-more"><span>Read more</span></a>
            </div>
            <div class="clearall"></div>

        </article>
    <div class="clearall"></div>
    </li>
</ul>

js看起来像：

slider=jQuery('.seminars-slider').bxSlider({
    mode: 'vertical',
    controls:false,
    pager:false,
    minSlides:2,
    maxSlides:2,
    moveSlides:1
});

jQuery('.up-control').click(function() {
    slider.goToNextSlide();
});
jQuery('.down-control').click(function() {
    slider.goToPrevSlide();
});

感谢。

Answer 1

可能是你太早调用bxSlider函数。如果你是从

调用它

$(document).ready(function() { ... });

请考虑使用

$(window).load(function() { ... });

使用这两个函数之间的区别在于（document）.ready等待DOM向用户显示初始状态，而（window）.load实际上等待直到所有资源都加载到DOM上。

Answer 2

您可以使用

slider=jQuery('.seminars-slider').bxSlider({
    mode: 'vertical',
    controls:false,
    pager:false,
    minSlides:2,
    maxSlides:2,
    moveSlides:1
});
setTimeout(function(){
            slider.redrawSlider();
        },100);

Answer 3

＆＃34; romelmederos＆＃34;在bxslider github页面上建议;

＆＃34; BxSlider v4.1 - 由于我在移动设备的响应式网站中使用高度百分比，因此存在滑块渲染问题。

所以我不得不做出改变从： slider.viewport.css（＆＃39; height＆＃39;，getViewportHeight（））; 对此： slider.viewport.css（＆＃39; height＆＃39;，＆＃39;＆＃39;）;

我在我的副本中使用选项更改了插件，但更改的最快方法是修改上面的行＆＃34;

我在1290行编辑了我的jquery.bxslider.js;这对我来说很有用，似乎比window.load更好的解决方案（使用window.load滑块被破坏，直到所有内容都被加载。）

Answer 4

如果您使用ajax加载<ul>元素并且它包含图片，请在加载后尝试slider.reloadSlider();。首先我用

setTimeout('slider.reloadSlider()',1000);

等待图片加载，但最终我切换到等待图片加载的好库ImagesLoaded：

imagesLoaded('.seminars-slider', function() {
   slider.reloadSlider();
});

（更改了变量名以匹配问题的那些）

Answer 5

Matthew Watson给了我一个好主意，我进入了插件并更新了实际的getViewPortHeight（）函数，如下所示：

var getViewportHeight = function(){
    var height = 0;
    children = slider.children;
    height = jQuery(slider.children[0]).height();;
    return height;
}

所以现在它取第一张图像的高度（希望它们都是一样的......）并用它来确定滑块的高度。请注意，您的控件仍然位于滑块下方，但这可以通过css定位等修复。

希望这有助于一些失去的人。

Answer 6

找到这个safari bug的解决方案。你必须让滑块的模式处于水平位置（不确定垂直是否也能正常工作但是淡入淡出根本不起作用）。然后你必须获得第一个图像的高度并将其传递给“.bx-viewport”。这是我的脚本的样子：

$( "img.Banner" ).attr( "id", "first-slide" );
$('.bxslider').bxSlider({
  adaptiveHeight: true,
  mode: 'horizontal',
  auto: true
  });
$("#first-slide").load(function(){
  var height = $(this).height();
   $( ".bx-viewport" ).css( "height", height );
});

bxslider在加载时计算错误的视口大小

6 个答案: