Bxslider отображает последний слайд как первый слайд
Я создал 4 ползунков. Первоначально все 4 скрыты (display:none), поэтому я использовал этот код для отображения соответствующего слайдера по щелчку соответствующей категории.
настройки слайдера.
touchEnabled: true,
hideControlOnEnd: true,
preloadImages: 'all',
infiniteLoop: false,
mode: 'horizontal',
startSlide: 0,
slideWidth: 300,
minSlides: 2,
maxSlides: 3,
slideMargin: 10,
pager: false,
slideSelector: ".isotope-item",
nextSelector: "#forefoo2_next",
prevSelector: "#forefoo2_prev",
nextText: '',
prevText: '',
onSliderLoad: function(){
jQuery(".sliloading").hide();
},
jQuery(window).ready(function(){
var slider4 = jQuery('.cat_fore').bxSlider();
var slider2 = jQuery('#cat_two').bxSlider();
var slider3 = jQuery('.cat_three').bxSlider();
var slider1 = jQuery('.cat_one').bxSlider();
jQuery("#sel_cat a" ).on("click", function(){
var current = jQuery(this).attr("slider");
jQuery(".sliloading").show();
jQuery(".slider").hide();
if( current == "cat_one"){
slider1.reloadSlider(s1config);
}else if(current == "cat_two"){
slider2.reloadSlider(s2config);
}else if(current == "cat_three"){
slider3.reloadSlider(s3config);
}else if(current == "cat_fore"){
slider4.reloadSlider(s4config);
}
}
});
проблема в том, что когда ползунок имеет менее 20 слайдов, он меняет количество слайдов, которые отображаются последним слайдом в качестве первого слайда.
для слайдов 20 или больше 20, он работает нормально.
Я также пробовал различные решения, перечисленные на этой ссылке но у меня ничего не получилось.
Я попытался повторить тот же пример на скрипка, который работает нормально, но на live это все еще дает ту же проблему
Я думаю, что проблема заключается в Высоте или каком-то другом элементе css, который заставляет его начинать с последнего слайда, потому что в fiddle порт просмотра мал, поэтому он отображает слайдер первого слайда, а также Когда мы пытаемся уменьшить размер порта просмотра браузера, он также отображается слайдер в правильном направлении.
8 ответов
У меня тоже недавно была эта проблема. Решение заключается в том, что вы должны поместить экземпляр BxSlider в $(window).событие load () не в $(window).ready() вот образец.
$(window).load(function(){
$('.bxslider').bxSlider({
pagerCustom: '#bx-pager',
randomStart: false,
controls: true,
auto: true
});
});
важно отметить, что проблема начинает сохраняться после не менее 7 слайдов.
быстрое решение:
.bx-clone{
display: none !important;
}
Если вы не хотите потерять анимацию infiniteLoop:
onSliderLoad: function() {
$("YOUR_SLIDER_SELECTOR").css(
"-webkit-transform",
"translate3d(-" + YOUR_SLIDER_WIDTH + "px, 0, 0)"
);
}
это хром только ошибка для меня, где "клон слайд", предназначенный для создания бесшовной прокрутки с последнего слайда обратно в первый покажет Первый толкая фактический первый слайд из пути. Скрытие слайда клона-это быстрое исправление, но нарушает эффект бесконечной прокрутки.
это ниже Решение исправило его для меня строго с CSS, без gnarly 3D transform CSS, Jquery или чего-либо еще... играет нормально с bootstrap сейчас:
/* BUG FIX FOR CLONE SLIDE FIRST */
.bx-wrapper img {
max-width: 100%;
display: inline-block;
}
.bx-viewport li {
min-height: 1px;
min-width: 1px;
}
Я думаю, если вы используете jquery чтобы показать клон с помощью onSlideBefore Вы зашли слишком далеко, вероятно, есть исправление CSS в зависимости от вашей конкретной ситуации. Иногда это связано с размером изображения и / или проблемой стиля отображения с BOOTSTRAP, поэтому, если вы используете BS, наверняка есть исправление CSS. В общем случае, если все слайды одного размера, попробуйте установить высоту и ширину, максимальную высоту и ширину, минимальную высоту и ширину для изображений, и это может исправить.
это не обязательно, но если это не работает, в параметры инициализации bxSlider попробуйте useCSS: false, ex:
$(window).load(function(){
$('.bxslider').bxSlider({
pagerCustom: '#bx-pager',
randomStart: false,
controls: true,
auto: true
useCSS:false
});
});
Как упоминалось OG Sean его ошибка Chrome.
У меня такая же проблема, и единственное, что мне нужно, когда я пытался, это код css:
.bx-viewport li { min-height: 1px; min-width: 1px; }
хорошо, я не знаю, почему, но когда я удаляю эту строку "minSlides: 2", она начинает работать правильно.
<li>
<img src="_images/xxx.jpg" alt="xxx" width="X" height="X"/>
</li>
установка явного тега высоты и ширины на изображениях в слайдере исправила эту проблему для меня с помощью ползунков, содержащих 2-5 изображений.