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

Question

[Валентин Попов]

При работе со слайдером 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, но без результатно, может кто подсказать из-за чего так?

Comments

[Евгений]

посмотрите какую высоту и ширину имеют картинки, когда их не видно.

Answer 1

[frie666]

Дружище, ты нашел решение? У меня такая же проблема

Comments

[Макс]

Привет, у меня тоже. Ты нашел решение?

[frie666]

Макс,
ДА, нашел! не использовать этот дурацкий слайдер! ))

Сначала перешел на slider swiper, а потом перешел на owl slider

Answer 2

[mahmudchon]

Замените в начале:
$(window).load(function() {
на
$(function() {
или
$(document).ready(function() {
Оба решения равнозначны.