18

无论如何，我最近开始使用 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();
});

谢谢。

4

6 回答 6

52

可能是您过早地调用 bxSlider 函数。如果你从

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

考虑改为使用

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

使用这两个函数的区别在于 (document).ready 等到 DOM 以其初始状态显示给用户，而 (window).load 实际上等到所有资源都加载到 DOM 上。

于 2013-02-13T08:21:07.243 回答
7

您可以使用

slider=jQuery('.seminars-slider').bxSlider({
    mode: 'vertical',
    controls:false,
    pager:false,
    minSlides:2,
    maxSlides:2,
    moveSlides:1
});
setTimeout(function(){
            slider.redrawSlider();
        },100);
于 2014-11-06T11:26:51.203 回答
3

bxslider github 页面上的“romemelederos”建议；

“BxSlider v4.1 - 滑块的渲染出现问题，因为我在移动响应式网站中使用高度百分比。

所以我不得不做出改变：slider.viewport.css('height', getViewportHeight()); 对此：slider.viewport.css('height', '');

我在我的副本中用一个选项更改了插件，但最快的更改方法是修改上面的行“

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

于 2014-07-25T16:08:52.410 回答
2

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

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

等待图像加载，但最终我切换到漂亮的库ImagesLoaded将等待图像加载：

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

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

于 2014-04-04T07:42:05.577 回答
0

找到了这个 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 );
});
于 2015-12-01T12:58:57.463 回答
0

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

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

所以现在它正在获取那里第一张图像的高度（希望它们都相同......）并使用它来确定滑块的高度。请注意，您的控件仍将位于滑块下方，但这可以通过 css 定位等进行修复。

希望这可以帮助一些迷路的人。

于 2015-07-30T17:43:44.833 回答