Как заставить bxSlider скрывать слайды до загрузки страницы?

bxslider имеет обратный вызов при загрузке слайдера (onSliderLoad). Я установил видимость как скрытую в контейнере div, а затем использую обратный вызов, чтобы установить видимость как «видимую».

<div id="siteslides" style="visibility: hidden;"></div>

$(".site_banner_slider").bxSlider({
    auto: true,
    slideWidth: $imageWidth,
    mode: 'fade',
    onSliderLoad: function(){
        $("#siteslides").css("visibility", "visible");
      }
  });

У меня была такая же проблема, и я решил ее следующим образом:

<div class="mySlider" style="display:none">

тогда

$(document).ready(function(){
      $('.mySlider').show().bxSlider({
        slideWidth: 160,
        minSlides: 2,
        maxSlides: 5,
        preloadImages: 'all'
      });
    });

Поместите div, который обертывает все содержимое, и поставьте на него style="display:none". Затем после вызова bxslider просто покажите его.

EX:

<script type="text/javascript">
$(document).ready(function(){

    $('.bxlider').bxSlider({
        displaySlideQty : 5,
        prevText : "",
        nextText : "",
        moveSlideQty : 5,
        infiniteLoop :  false
    });
    $(".bxsliderWrapper").show("fade");
});
</script>

Ни одно из опубликованных решений не помогло мне.

Использование видимости: скрыто привело к появлению огромного пустого места на странице.

По какой-то причине использование display: none не привело к загрузке ни одного слайда, а только элементов управления.

Это единственный способ найти какое-то разумное решение:

В CSS:

.ctaFtSlider
{
visibility: hidden;
height: 0;
}   

В функции:

$(document).ready(function(){
$('.bxslider').bxSlider({
...
onSliderLoad: function(currentIndex){
$(".ctaFtSlider").css("visibility", "visible");
$(".ctaFtSlider").css("height", "auto");
}
});
});

Наконец, HTML:

<div class="ctaFtSlider">
...
</div>

В итоге я добавил немного CSS, чтобы скрыть все, кроме первого слайда.

Никакой дополнительной разметки или поведения не требуется и работает во всех основных браузерах!

.bxslider {
  li {
    display: none;

    &:first-child {
      display: block;
    }
  }
}

Предположим, у вас есть:

HTML:

<ul class="slider">
<li>...</li>
<li>...</li>
</ul>

и jQuery:

jQuery('.slider').bxSlider({
        ...
});

Следующее решение поможет скрыть все слайды, кроме первого.

CSS:

ul.slider li:nth-child(n+2) {
    display: none;
}

Когда слайдер полностью загружен, каждый активный слайд автоматически получит стиль display: block.

У меня была такая же проблема, и мне помог этот трюк:

     <ul id="bxSlider" style="padding:0px !important;overflow:hidden;height:385px;">

поместите значения высоты и переполнения в элемент ul ползунка.

С уважением

Быстрое и простое решение только для CSS для современных браузеров (IE10 +):

.bxslider {
    transform: scale(0);
}

Это работает, потому что изначально ползунок будет уменьшен до нуля, но затем, когда загрузится bxSlider, он переопределит преобразование встроенным стилем.

Была такая же проблема. Я использовал разметку ниже и сначала спрятал <div class="bxsliderWrapper"> содержащий display: none; с помощью CSS display: none;. Я заметил, что ширина слайдов <div class="slide"> была отрисована в 1 пиксель.

Я подозреваю, что это как-то связано с отзывчивой функцией, которая берет размеры исходного контейнера, который был скрыт, и определяет встроенные стили для каждого слайда.

<div class="bxsliderWrapper">
  <div class="bxslider">
    <div class="slide">Your Content</div>
    <div class="slide">Your Content</div>
    <div class="slide">Your Content</div>
  </div>
</div>

Мое решение похоже на то, что bradrice упомянул выше об использовании встроенных функций обратного вызова. Вместо этого я просто добавил функцию reloadSlider() к функции show().

<script type="text/javascript">

var $j = jQuery.noConflict();
$j(document).ready(function(){
  var homeSlider = $j('.bxslider').bxSlider();
  $j(".bxsliderWrapper").show(0, "swing", function(){homeSlider.reloadSlider();});
});

</script>

Он запускает перезагрузку после завершения show ().

.

ИЗМЕНИТЬ

Первоначальное решение, приведенное выше, изначально работало, но у меня были проблемы, когда кеш был очищен во время жесткого обновления shift + REFRESH. Я предполагаю, что элементы, на которые нацелена функция .show(), были недоступны вовремя или ресурсы еще не были загружены. (Я предполагаю) Ниже приведено исправление этого поведения.

Вместо того, чтобы скрывать Bx Slider, содержащий <div> с display: none;, я скрывал изображения слайдов с помощью атрибута visibility CSS.

.bxslider .slide {
  visibility: hidden;
}

Это позволяет ползунку отображать правильный размер, не видя изображения на экране, пока они не будут готовы. Затем я использовал метод jQuery .css(), запускаемый $j(window).load(), чтобы изменить видимость после загрузки страницы. Это гарантировало, что весь код и элементы существовали до их отображения.

<script type="text/javascript">

  var $j = jQuery.noConflict();

  $j(document).ready(function(){
    var homeSlider = $j('.bxslider').bxSlider();
  });

  $j(window).load(function(){
    $j(".bxslider .slide").css("visibility", "visible");
  });

</script>

Этот метод также работал с несколькими ползунками на одной странице. Я обнаружил, что метод .show() приводит к поломке всех экземпляров ползунка. Я только догадываюсь, почему это лучшее решение, но, возможно, кто-то может добавить некоторую информацию, чтобы лучше это понять.

Я не могу вспомнить, где я это нашел, но я думаю, что это самый чистый способ решить эту проблему, когда все слайды будут видны при загрузке страницы.

Сначала добавьте div вокруг неупорядоченного списка bxslider:

<div class="bxslider-wrap">
    <ul class="bxslider">
        <li>Image / Content </li>
        <li>Image / Content </li>
        <li>Image / Content </li>
    </ul>
</div>

Затем добавьте эту строку в свой файл css, которая скрывает весь слайдер при загрузке страницы:

.bxslider-wrap { visibility: hidden; }

Наконец, установите ползунок на видимость: видимый через jQuery (в вашем файле js) при загрузке ползунка, чтобы сделать его снова видимым!

jQuery(document).ready(function($) {
    $('.bxslider').bxSlider({
        onSliderLoad: function(){ 
            $(".bxslider-wrap").css("visibility", "visible");
        }
    }); 
});

Надеюсь это поможет!

Я попробовал большинство решений для этого и обнаружил, что они недостаточно отполированы для того, к чему я стремился. Я все еще получал отрывистую презентацию после того, как ползунок загружался только что появлялся. Использование .fade () было близко, но оно анимировалось сверху слева направо, что выглядело странно. Подключение к onSliderLoad отлично работает, но изменение видимости по-прежнему заставляет ползунок просто появляться на экране. Я искал более элегантный вход, поэтому я добавил класс вместо изменения CSS.

jQuery:

$('.slider').bxSlider({
    auto: false,
    pager: false,
    mode: 'fade',
    onSliderLoad: function(){
        $(".slide-clip").addClass('-visible');
    }
});

SASS:

.slide-clip {
    opacity:0;
    max-width: 1305px;  // Used as a clipping mask
    max-height: 360px; // Used as a clipping mask
    overflow:hidden;  // Used as a clipping mask
    margin:0 auto;
    transition(all 275ms);
    &.-visible {
        transition(all 275ms);
        opacity:1;
    }

}

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

<div class="slide-clip">
    <ul class="slider">
        <li style="background-image: url('URL_HERE');"></li>
    </ul>
</div>

Я добавил заголовок и текстовый div в свой слайдер, поэтому, когда они загружали, все это складывалось вверху страницы, поэтому с помощью этого сообщения мне удалось скрыть элементы слайда, но показать элемент загрузки:

Как уже говорилось выше, класс visibility: hidden был добавлен во внешний div, но я также добавил класс visibility: visible за пределами этого, чтобы показать ajax_loader, затем с помощью кода ниже установите первый, чтобы скрыть, когда слайды загружены и были установлены как видимые. Теперь вместо уродливого пустого места во время загрузки слайдов вы видите загрузчик, поэтому он имеет больше смысла для пользователя:

jQuery(document).ready(function($) {
$('.bxslider').bxSlider({
    onSliderLoad: function(){ 
        $(".slideouter").css("visibility", "visible");
        $(".slideloader").css("visibility", "hidden");
    },
   autoControls: true,
  auto: true,
  mode: 'fade'
}); 

Надеюсь, это поможет, так что слайд-аут - это div, который скрыт в вашем CSS, а слайд-загрузчик виден в вашем CSS, но оба меняются местами после загрузки слайдера. Надеюсь, это поможет.

Привет, Ли

Я не знаю точно о методе style = "display: none", но когда "hide () / fadeOut ()" с контейнером jQuery bxSlider и после этого init bxSlider, он будет отображаться с ошибками в разметке. (возможно, используя display: none, чтобы избежать ошибки, но если вы хотите, чтобы ваш слайдер исчез, мой метод будет применим)

просто поместите свой контейнер как «абсолютный» в css и в своем JS перед инициализацией bxSlider переместите его в невидимую часть страницы, запустите его, а затем скройте, верните в предыдущую точку и, наконец, fadeIn:

$("#bxslider-container").css({'left' : "4000px"});
$('.bxslider').bxSlider();
$("#content-wrapper").hide().css({'left' : "0px"}).fadeIn(2000);

надеюсь, это поможет

Я использовал этот CSS, и он работал для экранов шириной более 1200, потому что мой слайдер имеет максимальную ширину, версия для планшета еще не исправлена, вы также можете попробовать количество% вместо пикселей таким образом.

.banner - это мой главный div для слайдера bxslider.

.banner{overflow: hidden !important; height: 426px;}
@media screen and (max-width: 1200px){.banner{height: auto;}}

<div class="banner">
  <div class="bx-wrapper">
     			  
  </div>		    		   
</div>

Не ответ как таковой, но кто-нибудь заметил, что с этой ошибкой все непрозрачность (и) элементов списка установлена ​​на 1? Я считаю, что начальный setChildrenFade не вызывается при инициализации слайд-шоу.

Обновлено:

Мне удалось отсортировать это, добавив:

/**
    * Start the slideshow
    */
    this.startShow = function (changeText) {
      if (options.mode == 'fade') {
                    setChildrenFade();
                }

К началу функции шоу.

Похоже, что setChildrenFade не вызывается по дизайну, пока не будет вызван GoToSlide. Возможно, это ошибка, поскольку вы действительно заметите проблему, только если фон элемента списка установлен на прозрачный ... в противном случае z: index обрабатывает скрытие при первоначальном запуске.

Надеюсь это поможет.