Почему некорректно отображается bxslider?

Question

[Вениамин Смирнов]

Привет! Юзаю bxslider, запускаю его 1 раз на странице:

$(function(){
  $('.bxslider').bxSlider({
   mode: 'fade',
   auto: true,
   pause: 5000,
   pagerCustom: '.bx-pager'
  });
 });

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

Поставил слайдер в блоки, которые скрываются и раскрываются через скрипт:

$(document).ready(function(){
	$('a.item1').click(function(){
	$("#item01").show();
        $('a').removeClass('active-item');
        $(this).addClass('active-item');
	$("#item02").hide();
	$("#item03").hide();
	return false;
	});
});

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

В чем может быть проблема?

Answer 1

[Павел]

Проблема как раз в том, что блоки не отображаются. Например в бутстраповские табы никогда в жизни не вставить слайдер или карусельку, потому что спрятанная таба имеет height:0 и слайдер строится в этой высоте.. после ресайза окна он перестаривается и можно его посмотреть. Как бороться не знаю. Пробовал flexslider, owl carousel, bxslider

Comments

[Вениамин Смирнов]

Походу выход - самописный слайдер?

[Павел]

Вениамин Смирнов: ничего не могу сказать) я не так силен в JS.врядли получится написать грамотнее, чем существующие решения. Изобретать велосипеды, знаете ли, дурной тон)) Если все слайдеры написаны именно так, значит на то есть причины. Я бы пробовал играться со скрываемыми блоками.. opacity, visibility, через z-index друг на друга накладывать, не скрывая. Или вынести за страницу.. типа сделать слайдер из блоков, а внутри уже слайдеры))

[Вениамин Смирнов]

Павел: через visibility и position:absolute решил вопрос :) Спасибо большое!

Answer 2

[V0VA]

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

$(document).ready(function() {
	
	//$('.slider').bxSlider();  // отключаем стандартный способ
	
	/* это добавляем = */
	const initSliderFunc = () =>{
		$('.slider').bxSlider();
	}		
	$("#my-button").on('click', function() {
		setTimeout(initSliderFunc, 0);	  
	});
	/* =это добавляем  */
});