Уроки по программированию

Проблема со slick слайдером

Если у вас перестает работать слайд (не работает карусель), когда slidesToShow равняется количеству слайдов, то вам необходимо клонировать дополнительный элемент слайда. Допустим есть следующий код:

<div class="slider" id="slider">
	<div>Element 1</div>
	<div>Element 2</div>
	<div>Element 3</div>
</div>

<script>
$('.slider').slick({
    slidesToShow: 3,
    slidesToScroll: 1,
    infinite: !0,
    arrows: !0,
    dots: !1,
    adaptiveHeight: !1,
    centerMode: !0,
});
</script>

Необходимо добавить к первому элементу слайда класс. Это делается для того, чтобы мы могли клонировать элемент. Вставляем перед запуском кода для слайда, код с клонированием.

<div class="slider" id="slider">
	<div class="forClone">Element 1</div>
	<div>Element 2</div>
	<div>Element 3</div>
</div>

<script>
	// Клонируем элемент с классом forClone
	let parent = document.getElementById('slider');
	let elem = parent.querySelector('.forClone');
	let clone = elem.cloneNode(true);
	parent.appendChild(clone);
	  
	$('.slider').slick({
		slidesToShow: 3,
		slidesToScroll: 1,
		infinite: !0,
		arrows: !0,
		dots: !1,
		adaptiveHeight: !1,
		centerMode: !0,
	});
</script>

После наша карусель будет работать идеально.

Комментарии к статье

  • Оставьте первый комментарий - автор старался

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Похожие статьи: