collapsing bxslider, когда элемент style "display: none"

Question

Я хотел бы использовать bxslider для проекта.

Но есть проблема, связанная с использованием более одного слайдера на той же странице (три в моем примере).

$(document).ready(function(){ 
    $('.slider1').bxSlider({ 
     slideWidth: 200, 
     minSlides: 2, 
     maxSlides: 3, 
     slideMargin: 10 
    }); 
    $('.slider2').bxSlider({ 
     slideWidth: 200, 
     minSlides: 2, 
     maxSlides: 3, 
     slideMargin: 10 
    }); 
    $('.slider3').bxSlider({ 
     slideWidth: 200, 
     minSlides: 2, 
     maxSlides: 3, 
     slideMargin: 10 
    }); 
}); 

Я сделал пример: jsfiddle

Если выбрать в моем примере Вариант 2 или Вариант 3 вы увидите, что ползунок обвалы.

Как я понимаю проблема style="display:none" в div для Вариант 2 и Вариант 3.

Может ли кто-нибудь помочь решить эту проблему?

Answer 1

Согласен. Кажется, это связано с отображением: нет. Вот как вы проходите мимо свернутого прядильщика ....

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

sldr1 = $('.slider1').bxSlider({ 
      slideWidth: 200, 
      minSlides: 2, 
      maxSlides: 3, 
      slideMargin: 10 
     }); 

, когда вы показываете новый счетчик, вы должны использовать

sldr1.reloadSlider(); 

отличительной чертой моей проблемы, которые ваши jsfiddle акций, является то, что я могу изменить размер окна и свернутый вертушка будет правильно отобразить. Я потратил много времени, пытаясь изменить размер $ (окна) или $ (документ), чтобы заставить spinner реагировать, я не смог найти что-то, что сработает.

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

вы не можете сделать это в функции выбора ...

//hide and show logic 
. 
. 
. 
//reload slider 
sldr1 = $('.slider1').bxSlider(); 
sldr1.reloadSlider(); 

Хотя это, кажется, что это могло бы работать, bxSlider() не может быть использовано, чтобы просто получить ссылку на существующие блесны. Он фактически создает второй слайдер. Если вы это сделаете, вы заметите несколько элементов управления и т. Д.
Тщательное повторное чтение документации показывает, что это по дизайну. Так что не ошибка, просто учебная вещь. Хорошо. Джентльмен внес свой вклад, поэтому я с радостью возьму его, как он.

Мой еще один совет: у меня было белое заполнение слева от слайдов. Это были пули LI, проявляющие себя. Что-то делать с моим сложным CSS, не играющим хороший w/bxslider CSS. Я перешел на слайды DIV внутри контейнера DIV. BxSlider хорошо работает с этим в соответствии с документацией.

удача