Не работает slick слайдер после того, как отображаю слайды с помощью JS с подгрузкой json данных?

Question

[Nayro TV]

В статичном шаблоне работает корректно:

<div class="store__body" id="store__body">
						<div class="store__inner">
							<div class="slider__body">
								<div class="slider">
									<div class="slider__item">
										<img
											data-fancybox="gallery"
											src="img/image_01.jpeg"
											alt=""
										/>
									</div>
									<div class="slider__item">
										<img
											data-fancybox="gallery"
											src="img/image_02.jpeg"
											alt=""
										/>
									</div>
									<div class="slider__item">
										<img
											data-fancybox="gallery"
											src="img/image_03.jpeg"
											alt=""
										/>
									</div>
								</div>
								<div class="slick__thumbs">
									<div class="slider-th__item">
										<img src="img/image_01.jpeg" alt="" />
									</div>
									<div class="slider-th__item">
										<img src="img/image_02.jpeg" alt="" />
									</div>
									<div class="slider-th__item">
										<img src="img/image_03.jpeg" alt="" />
									</div>
								</div>
							</div>

							<div class="store__info">
								<div class="store__title">Жилет</div>
								<div class="store__btn"></div>
								<div class="store__text">
									<ul>
										<li>100% хлопок</li>
										<li>Рост модели 178 см</li>
										<li>Размер жилета M</li>
										<li>Вещь требует особого ухода</li>
									</ul>
								</div>
							</div>
						</div>

const productsContainer = document.querySelector('#store__body')

getProducts()

async function getProducts() {
	const response = await fetch('./js/products.json')
	const productsArray = await response.json()
	renderProducts(productsArray)
}

function renderProducts(productsArray) {
	productsArray.forEach(function (item) {
		const productHTML = `<div class="store__inner">
		<div class="slider__body">
			<div class="slider">
				<div class="slider__item">
					<img
						data-fancybox="gallery"
						src="img/image_01.jpeg"
						alt=""
					/>
				</div>
				<div class="slider__item">
					<img
						data-fancybox="gallery"
						src="img/image_02.jpeg"
						alt=""
					/>
				</div>
				<div class="slider__item">
					<img
						data-fancybox="gallery"
						src="img/image_03.jpeg"
						alt=""
					/>
				</div>
			</div>
			<div class="slick__thumbs">
				<div class="slider-th__item">
					<img src="img/image_01.jpeg" alt="" />
				</div>
				<div class="slider-th__item">
					<img src="img/image_02.jpeg" alt="" />
				</div>
				<div class="slider-th__item">
					<img src="img/image_03.jpeg" alt="" />
				</div>
			</div>
		</div>

		<div class="store__info">
			<div class="store__title">Жилет</div>
			<div class="store__text">
				<ul>
					<li>${item.desc}</li>
					<li>Рост модели 178 см</li>
					<li>Размер жилета M</li>
					<li>Вещь требует особого ухода</li>
				</ul>
			</div>
		</div>
	</div>`
		productsContainer.insertAdjacentHTML('beforeend', productHTML)
	})
}

САМ SLICK

$('.slider__body').each(function () {
	$('.slider', $(this)).slick({
		slidesToShow: 1,
		slidesToScroll: 1,
		fade: true,
		speed: 500,
		asNavFor: $(this).find('.slick__thumbs')
	})
	$('.slick__thumbs', $(this)).slick({
		slidesToShow: 3,
		slidesToScroll: 1,
		focusOnSelect: true,
		autoplay: false,
		vertical: true,
		asNavFor: $(this).find('.slider'),
		responsive: [
			{
				breakpoint: 640,
				settings: {
					vertical: false
				}
			}
		]
	})
})

$(document).ready(function() {
	$('.collection__list').slick({
		slidesToShow: 2,
		slidesToScroll: 1,
		speed: 500,
		dots: true
	})
})

Fancybox.bind('[data-fancybox]', {})

Вот как лежат js файлы:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
		<script src="js/renderProducts.js"></script>
		<script src="js/slick.min.js"></script>
		<script src="js/script.js"></script>

Answer 1

[Александр Талалаев]

А где и как инициализируется сам слик?
Возможно вы забыли после обновления html его заново инициализировать, чтобы он узнал об изменениях.
Отдельно отмечу что в Slick есть функции динамического добавления слайдов программно. Может быть вам такой способ больше подойдёт?

Comments

[Nayro TV]

поправил вопрос

[Nayro TV]

А как его запустить(инициализировать) заново? Простите но я как то туплю...

[Александр Талалаев]

Nayro TV, ну так остался открытым вопрос, каким образом сам слик узнает что есть изменения, если инициализация идёт до изменений.
Значит делайте реиницилизацию. Он же сам по себе не реактивный и тп. Те не будет знать что есть изменения, если его тыкнуть тем или иным способом.

[Nayro TV]

Александр Талалаев, я понял что надо сделать реиницилизацию, но как сделать т е адаптировать под МОИ сладерЫ потому что я несколько их сделал...

[Александр Талалаев]

Nayro TV, После получения данных нужно вначале его уничтожить( slick('unslick')) + возможно удаление слайдов, после добавляете html, а затем заново создать как вы создавали изначально.

[Александр Талалаев]

Nayro TV, вы просто сделайте логику в отдельных функциях и далее можно из вызывать в fetch после в цепочке then например

[Nayro TV]

тоесть вт так?

async function getProducts() {
	const response = await fetch('./js/products.json')
	const productsArray = await response.json()
	slick('unslick')
	renderProducts(productsArray)
}

Answer 2

[alexalexes]

Как foreach-ем обходили контейнеры, чтобы инициализировать каждый слайдер:

$(какой-то селектор элемента или нода).slick(какие-то свойства инициализации);

Таким же путем нужно пробежаться по всем слайдерам и дать им команду обновить свое состояние (refresh) после того, как отработает функция renderProducts.

$('.slider__body').each(function () {
  $('.slider', $(this)).slick('refresh')
  $('.slick__thumbs', $(this)).slick('refresh')
})

Comments

[Nayro TV]

Спасибо, смысл я понял но блин я указываю везде но нигде не работает...

Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'refresh')

По идее должно быть так, где отработает функция renderProducts

async function getProducts() {
	const response = await fetch('./js/products.json')
	if (response.ok) {
		const productsArray = await response.json()
		renderProducts(productsArray)
		$('.slider__body').each(function () {
			$('.slider', $(this)).slick('refresh')
			$('.slick__thumbs', $(this)).slick('refresh')
		})
	} else {
		alert('Ошибка')
	}
}

я реально всё пробовал... даже головой думать

[Nayro TV]

alexalexes не работает...

[Nayro TV]

alexalexes чел помоги плиз я просто не понимаю.. я всюду ставил... не работает... пж, мне проект сдавать