bxslider в табах

[paralex]

Возникла тут проблема. Есть блок с 3 табами(вкладками), и в каждом свой слайдер. Вроде все сделал, но слайдер работает только в первой вкладке. При переключении на вторую или третью, контент слайдера не показывается, остаются только кнопки управления. Прочитал что нужно при нажатии на таб перегружать слайдер в таком случаи, так как блок был скрыт и он не просчитал размеры. Сделал вот так:

var slider = $('.bxslider-product-all').bxSlider();var sliderNew = $('.bxslider-product-new').bxSlider();var sliderSpecial = $('.bxslider-product-special').bxSlider();$('.tabs-link').click(function(){  slider.reloadSlider();  sliderNew.reloadSlider();  sliderSpecial.reloadSlider();});

 

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

В чем ошибка? И как можно реализовать такое по другому может быть более проще?

[hypnocolor]

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

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

 

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

Edited October 25, 2014 by hypnocolor

[paralex]

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

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

 

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

 

Использую bxslider и tabby. Спасибо за разъяснение, учитывая ваш ответ пришел вот к такому решению. Все стало работать, но насколько правильно это?

    var sliders = {};    sliders.tab1 = $('.bxslider-product').bxSlider();    sliders.tab2 = $('.bxslider-product-new').bxSlider();    sliders.tab3 = $('.bxslider-product-spec').bxSlider();    tabby.init({        toggleActiveClass: 'active',        contentActiveClass: 'active',        initClass: 'js-tabby',        callbackBefore: function ( toggle, tabID ) {        },        callbackAfter: function ( toggle, tabID ) {            sliders[tabID.substr(1)].reloadSlider();        }    });

tab1 tab2 tab3 это id моих табов. И пришлось дописать tabID.substr(1) , так как он возвращал #tab1

[hypnocolor]

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

[nikolablin]

Доброго времени. Тема старая, но, увы, актуальная.

 

Пытаюсь в стоковый Tabs UI воткнуть bxslider (с callback для инициализации следующих слайдеров). Всего таба три, в каждом по слайдеру.

 

HTML:

<div id="tabs">  <ul>    <li><a href="#refrig">Грузовик-рефрижератор</a></li>    <li><a href="#tent">Тентованный грузовик</a></li>    <li><a href="#tral">Грузовик-трал</a></li>  </ul><div id="refrig"><p>Content 1</p><div class="moduletable_park-slider"><h2>Галерея грузовиков</h2><div class="slider_refr"><ul><li><img src="/images/trucks/refrig/Fotolia_52239820_Subscription_XXL.jpg"></li><li><img src="/images/trucks/refrig/Fotolia_55218754_Subscription_XL.jpg"></li></ul></div><div class="slider_refr-pager"><a data-slide-index="0" href="/"><img src="/images/trucks/refrig/Fotolia_52239820_Subscription_XXL.jpg"></a><a data-slide-index="1" href="/"><img src="/images/trucks/refrig/Fotolia_55218754_Subscription_XL.jpg"></a></div></div></div><div id="tent"><p>Content 2</p><div class="moduletable_park-slider"><h2>Галерея грузовиков</h2><div class="slider_tent"><ul><li><img src="/images/trucks/tent/Fotolia_51570512_Subscription_XL.jpg"></li><li><img src="/images/trucks/tent/Fotolia_52155382_Subscription_XXL.jpg"></li></ul></div><div class="slider_tent-pager"><a data-slide-index="0" href="/"><img src="/images/trucks/tent/Fotolia_51570512_Subscription_XL.jpg"></a><a data-slide-index="1" href="/"><img src="/images/trucks/tent/Fotolia_52155382_Subscription_XXL.jpg"></a></div></div> </div><div id="tral"><p>Content 3</p><div class="moduletable_park-slider"><h2>Галерея грузовиков</h2><div class="slider_tral"><ul><li><img src="/images/trucks/tral/Fotolia_15252289_Subscription_XXL.jpg"></li><li><img src="/images/trucks/tral/Fotolia_39307969_Subscription_L.jpg"></li></ul></div><div class="slider_tral-pager"><a data-slide-index="0" href="/"><img src="/images/trucks/tral/Fotolia_15252289_Subscription_XXL.jpg"></a><a data-slide-index="1" href="/"><img src="/images/trucks/tral/Fotolia_39307969_Subscription_L.jpg"></a></div></div></div></div>

JS:

        var slider2_initialized = false;        var slider3_initialized = false;        $( "#tabs" ).tabs({            activate: function( event, ui ) {                var tab_id = $(ui.newPanel).attr('id');                alert(tab_id);                if(tab_id == "tent" && slider2_initialized == false)                {                    $('.slider_tent ul').bxSlider();                    slider2_initialized = true;                }                else if(tab_id == "tral" && slider3_initialized == false)                {                    $('.slider_tral ul').bxSlider();                    slider3_initialized = true;                }            }        });        $('.slider_refr ul').bxSlider();

В итоге, получаю загрузку контента таба и слайдера только в первом табе. В следующих - пусто.

 

 

 

UPD.

 

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

Edited June 19, 2015 by nikolablin

[nikolablin]

Решил трабл. Если кому актуально - поробуйте отрезать mootools библиотеки, конфликт исчезает.