bxSlider duplicates wrapper on reloadSlider()

Question

Я пытаюсь заставить слайдер динамически изменять количество слайдов (maxslide/minslide) с помощью reloadSlider(). Но он дублирует оболочку.

Интересно, что он дублирует не всегда и иногда отображается правильно (я имею в виду после перезагрузки страницы браузера).

Вот мои бедные линии:

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

    // init product slider 
    if($('.slider-product-wrap').length>0){ 
    var slider_product=$('.slider-product-wrap .slider').bxSlider();  

    // product slider sets 
    function sliderProduct(){ 

    var slideAmount=3; 

    // slide amount depends on window's width 
    if($(window).width()<1000 && $(window).width()>=500) slideAmount=2; 
    else if($(window).width()<500) slideAmount=1; 

    // set custom settings; 
     slider_product.reloadSlider({ 
     minSlides: slideAmount, 
     maxSlides: slideAmount, 
     auto: false, 
     slideWidth: 364, 
     slideMargin: 28, 
     pause: 5000, 
     nextText:'', 
     prevText:'', 
     autoHover: true, 
     autoStart: true, 
     pager: false, 
     controls: true   
     }); 
    } 

    sliderProduct(); // create new slider 

    // reload slider to make it responsive 
    $(window).resize(function(){ 
    sliderProduct(); 
    }); 
} 
}(jQuery)); 

Я считаю, что это разумное решение, поэтому я жду вашей помощи.

Answer 1

Обычно, когда вы получаете прерывистое поведение, это, вероятно, проблемы с загрузкой. При создании элементов DOM, таких как div.bx-wrapper и div.bx-viewport bxSlider (и большинство плагинов jQuery), нужно немного больше времени. Мне нравится использовать обратные вызовы или небольшой тайм-аут, потому что он дает мне местозаполнитель в цепочке событий. Вот демонстрация того, что, я считаю, вы хотели: bxSlider Reloads on Resize.

Изменения заключаются в следующем:

(function ($) { 
    $(document).ready(function() { 
     if ($('.bxWrap').length > 0) { 
      var bxSlider = $('.bxWrap .bxSlider').bxSlider(); 
     } 

     function bxInit() { 
      var winSize = $(window).width(), 
       sizeID; 
      if (winSize < 1000 && winSize >= 500) { 
       sizeID = 2; 
      } else if (winSize < 500) { 
       sizeID = 1; 
      } else { 
       sizeID = 3; 
      } 
      bxSlider.reloadSlider({ 
       minSlides: sizeID, 
       maxSlides: sizeID, 
       moveSlides: sizeID, 
       auto: true, 
       slideWidth: 364, 
       slideMargin: 28, 
       pause: 5000, 
       nextText: '', 
       prevText: '', 
       autoHover: true, 
       autoStart: true, 
       autoDelay: 750, 
       pager: false 
      }); 
     } 

     bxInit(); 

     $(window).resize(function() { 
      bxSlider.stopAuto(true); 
      bxInit(); 
     }); 
    }); 
}(jQuery)); 

я изменил имена, потому что это легче для меня, чтобы связать объекты с общим префиксом. Я добавил параметр autoDelay, который дает bxSlider дополнительное время для перезагрузки. На событие изменения размера я добавил autoStop перед запуском функции bxInit() (это ваш sliderProduct()). Он работает в первый раз, когда я его выпустил, и я проверил дополнительные div и не нашел ни одного. Кстати, я также добавил опцию moveSlides, поэтому, когда она находится на 3 слайдах, она будет перемещаться 3 за раз, 2 хода 2, 1 ход 1. На горизонтальных каруселях он работает более плавно, когда слайды отображаются, а затем скрыты, а не показаны 2 или 3 раза спрятано. Удачи.