Не работает slick слайдер, почему?

Question

[Роман]

Всем привет. Все сделал как в документации, но он почему то не работает.. Причем вроде как подключился, но криво. Один из элементов вылазит слева страницы, причем его можно листать, но он не листается, от начала до конца страницы только двигается.. Потом вообще исчезает.. Что не так с этим слайдером?

$('.modal1').click(function() {
    	$('#modalwindow').arcticmodal()
    });

$('.single-item').slick();

<link rel="stylesheet" href="css/simple.css">
	<link rel="stylesheet" href="css/jquery.arcticmodal-0.3.css">
	<link rel="stylesheet" href="css/bootstrap.min.css">
	<link rel="stylesheet" href="css/slick-theme.css">
	<link rel="stylesheet" href="css/slick.css">
	<link rel="stylesheet" href="css/style.css">
<section id="fourth">
		<div class="container">
			<div class="row">
				<div class="col-lg-12 text-center">
					<h2 class="fourth_title">Beautiful Interface</h2>
					<p class="fourth_title_down">Landing Screen</p>
				</div>
				<div class="row">
					<div class="col-lg-12 text-center">
						<div class="single-item">
							<div><img src="img/1.png" alt=""></div>
							<div><img src="img/2.png" alt=""></div>
							<div><img src="img/3.png" alt=""></div>
							<div><img src="img/4.png" alt=""></div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</section>
	<script src="js/jquery.js"></script>
	<script src="js/bootstrap.min.js"></script>
	<script src="js/jquery.arcticmodal-0.3.min.js"></script>
	<script src="js/slick.min.js"></script>
	<script src="js/slick.js"></script>
	<script src="js/main.js"></script>

Answer 1

[Сергей delphinpro]

Слайдер нужно инициализировать после того как он станет видимым (насколько я понял — у вас модальное окно).
Скрытые элементы не имеют ширины и слайдер не может правильно посчитать размеры слайдов.

Comments

[Роман]

Пробовал добавить ширину и высоту. Толку нет. Модальное окно тоже есть на странице. Но оно работает..

[Сергей delphinpro]

Роман, Я не об этом. Я о том, что скрытые элементы не имеют размеров. Поэтому как я уже сказал, и там внизу три раза повторили, инициализировать слайдер нужно после открытия окна!

Answer 2

[Максим Тимофеев]

1 что надо всегда делать, это смотреть на ошибки в консоле, но допустим их там нет, тогда:

<script src="js/slick.min.js"></script>
<script src="js/slick.js"></script>

Зачем дважды?

<link rel="stylesheet" href="css/slick-theme.css">
<link rel="stylesheet" href="css/slick.css">

Почему тема перед основными стилями?

Убедитесь что $('.single-item') находит, например так:
console.log($('.single-item').length);
выведет в консоль 1 если все ок.

Comments

[Роман]

Да это я уже экспериментировал, местами менял, добавлял.. Толку только нет..

[Максим Тимофеев]

Роман, в консоле ошибки есть?

[Роман]

Максим Тимофеев, есть.
Вот:

[Роман]

Максим Тимофеев, я еще плохо понимаю jquery, только учусь его применять.

[Максим Тимофеев]

Роман, исправьте, первые 3 - добавить на сайт, рядом с css. 4-я надо читать

[Роман]

Максим Тимофеев, насколько я понимаю, это шрифты и картинка. Они то чем могут помочь?

[Максим Тимофеев]

Роман, они не помогут, я не говорил, что в них дело, но решить то все равно надо или нет?

Answer 3

[alex-1917]

<script src="js/slick.min.js"></script>
  <script src="js/slick.js"></script>

тут явно одна строка лишняя

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

для скрытых блоков слик не пашет, это так со всеми слайдерами будет, увы и ах))) или пишите свой слайдер, теоретически можно и на скрытых делать, но будет топорно выглядеть...

Comments

[Роман]

У меня подобная ситуация была в прошлом проекте, только там использовался другой slick слайдер. И несколько модальных окон было. И все прекрасно работало.. slick.js убрал из разметки. Это я уже экспериментировал, и местами переставлял, толку нет..