Slick slider при первой загрузки страницы не отображает картинки?

При работе со слайдером slick столкнулся с такой проблемой. При первой загрузки страницы картинки в сладере не отображаются, а если еще раз обновить, то все норм. У меня в одном слайдере встроен другой слайдер, вот код:
<div class="slider">
					<div class="slider__wrap">
						<div class="slider__slide">
							<div class="slider-info">
								18+
							</div>
							<img class="slider__img" src="img/slider/slider-1.png" alt="">
							<div class="slider-info__bottom">
									<div class="slider-info__logo">
										<img src="img/mini-logo.png" alt="">
										<p>В кино с 12 сентября</p>
									</div>
								</div>
						</div>
						<div class="slider__slide">
								<div class="slider-info">
										18+
									</div>
							<img class="slider__img" src="img/slider/slider-2.png" alt="">
							<div class="slider-info__bottom">
								<div class="slider-info__logo">
									<img src="img/mini-logo.png" alt="">
									<p>В кино с 12 сентября</p>
								</div>
							</div>
						</div>
					</div>
					
					<div class="slider-quote">
						<div class="slider-quote__wrap">
							<div class="slider-quote__slide">
								<div class="quote">
									<div class="quote__text">никогда не знаешь, что определит</div>
									<div class="quote__text quote__text--big">твое будущее.</div>
								</div>
							</div>
							<div class="slider-quote__slide">
								<div class="quote">
									<div class="quote__text">Он направил меня именно туда,</div>
									<div class="quote__text quote__text--big">где я должен был оказаться.</div>
									<div class="quote__text">к людям, которые были мне</div>
									<div class="quote__text quote__text--big">нужны</div>
								</div>
							</div>
						</div>
					</div>

				</div>


вот jquery код:
$(window).load(function(){
		$('.slider__wrap').slick({
			arrows: true,
			nextArrow: '<div class="arrows-block arrows-block__right"><div class="arrows arrows--next"></div><p class="arrows-text arrows-text--right">Выберите картинку</p></div>',
			prevArrow: '<div class="arrows-block arrows-block__left"><div class="arrows arrows--prev"></div><p class="arrows-text arrows-text--left">Выберите картинку</p></div>',
		});
	
	$('.slider-quote__wrap').slick({
		arrows: true,
		vertical: true,
		nextArrow: '<div class="arrows-block arrows-block--vertical arrows-block--bottom"><div class="arrows arrows--next"></div><p class="arrows-text arrows-text--bottom">Выберите текст</p></div>',
  	prevArrow: '<div class="arrows-block arrows-block--vertical arrows-block--top"><div class="arrows arrows--prev"></div><p class="arrows-text arrows-text--top">Выберите текст</p></div>',
	});

});


пробовал unslick, но без результатно, может кто подсказать из-за чего так?
  • Вопрос задан
  • 2128 просмотров
Решения вопроса 1
@frie666
Дружище, ты нашел решение? У меня такая же проблема
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
mahmudchon
@mahmudchon
Замените в начале:
$(window).load(function() {
на
$(function() {
или
$(document).ready(function() {
Оба решения равнозначны.
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы