Как имитировать клик по кнопке в момент переключения табов?

Question

[Андрей Петров]

Здравствуйте!

Прошу помощи в немного нестандартной реализации работы популярного слайдера картинок "slick slider".
С помощью кода ниже происходит инициализация скрипта слайдера после загрузки страницы - с этим всё нормально.

$(document).on('ready', function () {
			$(".regular-ofic-bann").slick({
			dots: true,
			infinite: true,
			//centerMode: true,
			slidesToShow: 6,
			slidesToScroll: 6
		});
	});

Но вывод слайдеров с картинками должен быть не просто на одной странице, а в разных элементах списка , которые переключаются кнопками в табах Bootstrap 5.
Так вот, на первом "Табе" слайдер выводится нормально. А при переключении на второй таб (равно как и на остальные) слайдер не до конца инициализируется: картинки не выстраиваются одна за другой, а перекрывают друг друга.
А полная инициализация включается, когда на активном Табе щелкнешь по кнопке пролистывания баннеров.
Ошибок в консоли браузера при этом не вижу.

Может, это будет и так себе решение, но можно ли тогда в момент активации таба дополнительно имитировать клик по кнопке прокрутки баннеров в контенте этого таба? Как это правильно включить в скрипт инициализации?

Упрощенный HTML:

<ul class="nav nav-pills" id="mnewsTabbann" role="tablist">
	<li class="nav-item" role="presentation"><button class="nav-link active" id="allbanners-tab" data-bs-toggle="tab" data-bs-target="#allbanners-tab-pane" type="button" role="tab" aria-controls="allbanners-tab-pane" aria-selected="true">Таб слайдера - 1</button> </li>
	<li class="nav-item" role="presentation"> <button class="nav-link" id="gorod-tab" data-bs-toggle="tab" data-bs-target="#gorod-tab-pane" type="button" role="tab" aria-controls="gorod-tab-pane" aria-selected="false">Таб слайдера - 2</button></li>
	<li class="nav-item" role="presentation"> <button class="nav-link" id="minist-tab" data-bs-toggle="tab" data-bs-target="#minist-tab-pane" type="button" role="tab" aria-controls="minist-tab-pane" aria-selected="false">Таб слайдера - 3</button> </li>
</ul>
<ul class="regular-ofic-bann">
	<li>Слайдер - 1</li>
	<li>Слайдер - 2</li>
	<li>Слайдер - 3</li>
</ul>

Comments

[Александр Васильев]

Посмотри тут
Погугли так
Забудь про slick, посмотри swiper

[Froggyweb]

При переключении табов надо переинициализировать слайдер. По-моему событие reinit.
вот даже 'мануал' Как решить проблему с отображением слайдера Slick?

Answer 1

[Андрей Петров]

Спасибо всем, кто откликнулся и, главное, направил поиски в другую сторону от совсем уж неподходящего решения, которое пришло мне на ум!
В итоге рабочее решение получилось такое:

$(document).on('ready', function () {
		$(".regular-ofic-bann").slick({
		dots: true,
		infinite: true,
		slidesToShow: 6,
		slidesToScroll: 6
	});
	$('.nav-link').on('click', function (e) {
		//При клике по табу уничтожаем объект...
		$('.regular-ofic-bann').slick('unslick');
		//...и инициализируем новый слайдер
		$('.regular-ofic-bann').slick({
			dots: true,
			infinite: true,
			slidesToShow: 6,
			slidesToScroll: 6
		});
	});
});

Answer 2

[ImagineTables]

Дисклеймер: не уверен, что правильно понял проблему, но попытка не пытка. Попробуйте первый раз инициализировать контролы внутри бутстраповских табов (т.е., в данном случае, делать вызов .slick()) из события shown.bs.tab (ну и запоминать, что инициализация состоялась, чтобы при повторном выборе таба её не делать повторно, либо unslick'ать всё на парное событие hidden.bs.tab).

Событие shown.bs.tab генерирует контрол, который переключает табы. Т.е.

$('button[role="tab"]')
	.on('shown.bs.tab', function (e) { … } );

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