bxSlider, не показывающий слайды при изменении размера

Question

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

Проблема, которую я испытываю, заключается в том, что ползунок IS повторно внедрен, но без слайдов.

код я использую:

var newdiv = $('<div class="slider1" />'); 
     $(window).resize(function(){ 
      $("#featured").empty(); 
      $("#featured").append(newdiv); 
      if($(window).width() > 640){ 
       $('.slider1').bxSlider({ 
        slideWidth: 1200, 
        minSlides: 4, 
        maxSlides: 4, 
        slideMargin: 10, 
        pager: false 
       }); 

      }else if($(window).width() > 480 && $(window).width() < 640){ 
       $('.slider1').bxSlider({ 
        slideWidth: 800, 
        minSlides: 3, 
        maxSlides: 3, 
        slideMargin: 10, 
        pager: false 
       }); 
      }else if($(window).width() < 480){ 
       $('.slider1').bxSlider({ 
        slideWidth: 500, 
        minSlides: 2, 
        maxSlides: 2, 
        slideMargin: 10, 
        pager: false 
       }); 
      } 
     }); 

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

Answer 1

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

Вместо опорожнения и переопределения вы можете уничтожить элемент управления bxSlider.

Код:

slider.destroySlider(); 
slider = $('.bxslider').bxSlider({ 
    slideWidth: 500, 
    minSlides: 2, 
    maxSlides: 2, 
    slideMargin: 10, 
    pager: false 
}); 

Демо: http://jsfiddle.net/IrvinDominin/pjWjy/

Это изменение размера может стоить немного вместо resize вы можете создать свой resize end событие: JavaScript/JQuery: $(window).resize how to fire AFTER the resize is completed?

Answer 2

Вы описываете что-то я ответил здесь

[collapsing bxslider when element style"display:none"

Bxslider показывает элементы управления nav, но не слайды. Решение разрешено путем вызова slider1.reloadSlider()

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

$('.slider1').bxSlider() 

не может быть использован для получения ссылки на ваш слайдер. он создаст новый слайдер каждый раз.

попробуйте назначить это переменной и затем использовать эту переменную для .append() и .reloadSlider() при необходимости.

//initial creation 
myslider = $('.slider1').bxSlider(options); 

//then in the resize() event handler... 
myslider.reloadSlider(); 

удачи

Answer 3

я мог бы найти странное решение для этого, и хотел бы, чтобы подтвердить, если он работает на них.

Сначала инициализируйте ползунок в документе готовым и добавьте вызов изменения размера.

<script> 
var myslide; 
$(document).ready(function(){ 
myslide= $('.bxslider').bxSlider({ 
    mode: 'horizontal', 
    captions: false, 
    controls : false, 
    pause:5000, 
    auto:true 
}); 
}); 

$(window).resize(function(){ 
    console.log(myslide.getCurrentSlide()); 
    }); 

</script> 

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