it-roy-ru.com

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 это работает нормально .... Я также пробовал разные решения, перечисленные в по этой ссылке но у меня ничего не получалось.
Я попытался повторить тот же пример на fiddle , который работает нормально, но на live он все еще вызывает ту же проблему 

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

12
Abhimanue Tamang

У меня тоже была эта проблема совсем недавно. Решение заключается в том, что вы должны поместить экземпляр BxSlider в событие $ (window) .load (), а не в $ (window) .ready (), вот пример.

$(window).load(function(){
            $('.bxslider').bxSlider({
                pagerCustom: '#bx-pager',
                randomStart: false,
                controls: true,
                auto: true
            });    
        });

Важно отметить, что проблема начинает сохраняться, когда у вас есть по крайней мере 7 слайдов.

15
Abetoy

Быстрое решение:

.bx-clone{
   display: none !important;
}

Если вы не хотите терять анимацию бесконечного цикла:

   onSliderLoad: function() {
      $("YOUR_SLIDER_SELECTOR").css(
         "-webkit-transform", 
         "translate3d(-" + YOUR_SLIDER_WIDTH + "px, 0, 0)"
      );
    }
10
red_alert

Для меня это ошибка, связанная только с Chrome, где «слайд-клон», предназначенный для плавной прокрутки от последнего слайда к первому, покажет, как сначала вытолкнуть фактический первый слайд. Скрытие слайда-клона - это быстрое решение, но оно устраняет эффект бесконечной прокрутки.

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

/* 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 для показа клона с помощью onSlide, то до того, как вы зашли слишком далеко, вероятно, есть исправление CSS в зависимости от вашей конкретной ситуации. Иногда это происходит из-за размера изображения и/или проблемы стиля отображения с BOOTSTRAP, поэтому, если вы используете BS, наверняка есть исправление CSS. В общем, если все ваши слайды имеют одинаковый размер, попробуйте установить высоту и ширину, максимальную высоту и ширину и минимальную высоту и ширину для изображений, и это может исправить это.

Это не обязательно, но если это не сработает, в опциях инициализации bxSlider попробуйте использовать CSS: false, например: 

$(window).load(function(){
        $('.bxslider').bxSlider({
            pagerCustom: '#bx-pager',
            randomStart: false,
            controls: true,
            auto: true
            useCSS:false
        });    
    });
9
OG Sean

Вам просто нужно остановить цикл:

infiniteLoop:false

... и больше нет .bx-клона

http://bxslider.com/options

3
user4482668

Как упомянул OG Sean, это ошибка Chrome.

У меня была та же проблема, и единственное, что мне понадобилось, когда я пытался, это код CSS:

.bx-viewport li { min-height: 1px; min-width: 1px; }
2
Turbojohan

Работа с bxslider была самой большой ошибкой в ​​моей жизни.

0
Martin Zvarík

Хорошо, я не знаю почему, но когда я удаляю эту строку "minSlides: 2", она начинает работать правильно.

0
Abhimanue Tamang
<li>
    <img src="_images/xxx.jpg" alt="xxx" width="X" height="X"/>
</li>

Установка явного тега высоты и ширины на изображениях в ползунке исправила эту проблему для меня с ползунками, содержащими 2-5 изображений.

0
mrutt