Slick slider в модальном окне bootstrap3?

Question

[MegaPuxapb]

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

Если обновить страницу или пролиснуть на след. слайд всё ок.
Как починить?

//goods_slider 
	$('#modalGoods').on('shown.bs.modal', function () {
		$('.goods_slider').fadeIn(500);
		$('.goods_slider').resize();
	});

	$('#modalGoods').on('hidde.bs.modal', function () {
		$('.goods_slider').resize();
		$('.goods_slider').fadeOut();
	});
	
	$('.goods_slider').slick({
		slidesToShow: 3,
		speed: 1000,
		dots: false,
		arrows: true,
		responsive: [
		    {
			    breakpoint: 768,
			    settings: {
			    	centerMode: false,
			    	slidesToShow: 1,
			    	dots: false,
			    	arrows: true,
			    }
			}]       
	});

Comments

[Smeecy Smeecy]

Была такая же проблема , только с табами на bootstrap. Вроде, была проблема в классе collapsing , который появляется при открытии.. Попробуйте классу show задать display:block;

Answer 1

[tyzberd]

Вешаете на окно событие открытия, а в нем вызываете
$('.slick-slider').slick('refresh');

Answer 2

[Neowaring]

Верно, я стабилизирую в окне таким методом

$('#modal_image_pp').on('shown.bs.modal', function () {
                    $('.slider-for').slick('refresh');
                    $('.slider-nav').slick('refresh');
                    $('.slider-forpc').slick('refresh');
                    $('.slider-navpc').slick('refresh');
                });