Как правильно инициализировать slick слайдер по открытию модального окна?

Question

[gogadesign]

Вызов модального окна:

a class="btn btn-warning" href="#" data-toggle="modal" data-target=".bd-example-modal-lg2">Посмотреть работы</a>

<script>
	       $(document).ready(function(){$('.slider3'){
	 $('.slider3').slick({
	 dots: true,
	 infinite: false,
	 slidesToShow: 1,
	 slidesToScroll: 1,
	 prevArrow: '<button type="button" class="slick-prev">Previous<\/button>',
	 nextArrow: '<button type="button" class="slick-next">Next<\/button>',
	}); 
	});
	</script>
	<script>
		$('.slider3').slick('setPosition');

	</script>

slick('setPosition') добавил, но видимо неправильно вписал значение.
По открытию содержимое в слайдере показывается сплошной колонкой вниз. Слайды начинают верно перестраиваться только после прокрутки. Помогите, пожалуйста...

Answer 1

[Виталий Першин]

slick('setPosition') нужно вызывать после открытия модального окна, а вы вызываете его просто так. Учитывая что инициализация слайдера у вас через $(document).ready(function() то setPosition и не отработает, но это другая история

Comments

[gogadesign]

Да, вы правы. Вписал так:

<script>
	
	 $('.slider3').slick({
	 dots: true,
	 infinite: false,
	 slidesToShow: 1,
	 slidesToScroll: 1,
	 prevArrow: '<button type="button" class="slick-prev">Previous<\/button>',
	 nextArrow: '<button type="button" class="slick-next">Next<\/button>',
	}); 

	</script>
	<script>

		 $('.bd-example-modal-lg2').on('shown.bs.modal', function() {
  $('.slider3').slick('setPosition');
});

Вроде все работает, но не уверен, правильно ли все в плане синтаксиса)

[Виталий Першин]

gogadesign, Да, все правильно.