Я создаю сайт, который использует bxSlider.
Когда страница загружается, все слайды видны, уложены друг на друга друг над другом. Когда страница полностью загружена, первый слайд остается видимым, а остальные исчезают, так что ползунок может анимировать и отображать их по одному.
Я пробовал использовать различные обратные вызовы CSS и 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'
});
});
Поместите a div, который завершает весь контент и помещает на него style="display:none". Затем, после вызова bxslider, просто покажите его.
Пример:
<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;
}
}
}
У меня была такая же проблема, и этот трюк помог мне:
<ul id="bxSlider" style="padding:0px !important;overflow:hidden;height:385px;">
введите значения высоты и переполнения на элемент ul ползунка.
С наилучшими пожеланиями
Имел эту же проблему. Я использовал разметку ниже и сначала спрятал содержащую <div class="bxsliderWrapper"> с CSS display: none;. Я заметил, что ширина слайдов <div class="slide"> была отображена в 1px.
Я подозреваю, что это имеет какое-то отношение к отзывчивому признаку с учетом размеров исходного контейнера, который был скрыт, и определения встроенных стилей для каждого слайда.
<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().
.
EDITED
Исходное решение выше работало первоначально, но у меня были проблемы, когда кэш был удален во время жесткого обновления 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");
}
});
});
Надеюсь, это поможет!
Предположим, что у вас есть:
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.
Я попробовал большинство решений и обнаружил, что они недостаточно полированы для того, что я собираюсь сделать. Я все еще получал отрывистую презентацию, как только ползунок загрузился с ней. Использование .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 в свой слайдер, поэтому, когда они загружались, все было уложено в верхней части страницы, поэтому с помощью этого сообщения мне удалось скрыть элементы слайда, но показать элемент загрузки:
Как и другие выше, была указана видимость: скрытый класс был добавлен во внешний div, но я также добавил видимость: видимый класс за пределами этого, чтобы показать ajax_loader, а затем с помощью кода ниже, установите первое, чтобы скрыть, когда слайды загружены и установлены на видимые. Теперь вместо того, чтобы иметь уродливое пустое пространство во время загрузки слайдов, вы можете увидеть загрузчика, поэтому он имеет больше смысла для пользователя:
jQuery(document).ready(function($) {
$('.bxslider').bxSlider({
onSliderLoad: function(){
$(".slideouter").css("visibility", "visible");
$(".slideloader").css("visibility", "hidden");
},
autoControls: true,
auto: true,
mode: 'fade'
});
Я надеюсь, что это поможет, поэтому slideouter - это div, который скрыт в вашем css, и slideloader отображается в вашем css, но оба они меняются местами после загрузки слайдера. Надеюсь, что это поможет.
Приветствия, Ли
Быстрое и простое решение только для CSS для современных браузеров (IE10 +):
.bxslider {
transform: scale(0);
}
Это работает, потому что сначала слайдер будет уменьшен до нуля, а затем, когда bxSlider загружает его, он переопределит преобразование встроенным стилем.
Я не знаю точно о методе style = "display: none", но когда "hide()/fadeOut()" с контейнером jQuery bxSlider и после этого init bxSlider, он будет отображаться с ошибками в разметке. (возможно, с помощью дисплея: ни один из них не позволит избежать ошибки, но если вы хотите пометить свой слайдер, мой метод будет применим)
просто поместите ваш контейнер как "абсолютный" в 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();
}
В начало функции show.
Похоже, что setChildrenFade не получает вызов по дизайну до тех пор, пока не вызывается GoToSlide. Возможно, это ошибка, так как вы только действительно замечаете проблему, если фон элемента списка установлен на прозрачный... иначе индекс z: обрабатывает скрытие при начальном запуске.
Надеюсь, что это поможет.