Bxslider вычисляет неправильный размер видового экрана при загрузке

В любом случае, я недавно начал использовать 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();
});

Спасибо.

Ответ 1

Возможно, вы слишком рано вызываете функцию bxSlider. Если вы вызываете его из

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

рассмотрим вместо этого

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

Разница между этими двумя функциями заключается в том, что (document).ready ждет, пока DOM не будет показан пользователю в его исходном состоянии, тогда как (window).load фактически ждет, пока все ресурсы не будут загружены в DOM.

Ответ 2

Вы можете использовать

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

Ответ 3

"romelmederos" на странице bxslider github;

"BxSlider v4.1 - Имею проблемы с рендерингом слайдера, так как я использую проценты для высоты на быстродействующем веб-сайте для мобильных устройств.

Поэтому мне пришлось внести изменения из: slider.viewport.css('height', getViewportHeight()); к этому: slider.viewport.css('height', '');

Я изменил плагин с опцией вместо этого в моей копии, но самый быстрый способ изменить - это изменить строку выше "

Я отредактировал мой jquery.bxslider.js в строке 1290; Это отлично подойдет для меня и кажется лучшим решением, чем window.load(с помощью window.load ползунок был поврежден до тех пор, пока все не загрузится.)

Ответ 4

Если вы загружаете элемент <ul> с помощью ajax и он содержит изображения, попробуйте slider.reloadSlider(); после загрузки. Сначала я использовал

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

чтобы ждать загрузки изображений, но в итоге я переключился на симпатичную библиотеку ImagesLoaded, которая будет ждать загрузки изображений:

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

(изменил имена переменных, чтобы они совпадали с именами вопроса)

Ответ 5

Мэтью Уотсон дал мне хорошую идею, и я вошел в плагин и обновил фактическую функцию getViewPortHeight() следующим образом:

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

Итак, теперь он принимает высоту первого изображения (надеюсь, они все одинаковы...) и используя это, чтобы определить высоту слайдера. Обратите внимание: ваши элементы управления по-прежнему будут сидеть под ползунком, но это можно зафиксировать с помощью позиционирования css и т.д.

Надеюсь, что это поможет некоторым потерянным людям.

Ответ 6

Найден решение для этой ошибки сафари. Вы должны иметь режим ползунка по горизонтали (не уверен, что вертикальная работа тоже, но затухание вообще не работает). Затем вы должны получить высоту первого изображения и передать его в ".bx-viewport". вот как выглядит мой script:

$( "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 );
});