@yagyar001

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

Всем привет. Все сделал как в документации, но он почему то не работает.. Причем вроде как подключился, но криво. Один из элементов вылазит слева страницы, причем его можно листать, но он не листается, от начала до конца страницы только двигается.. Потом вообще исчезает.. Что не так с этим слайдером?
$('.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>
  • Вопрос задан
  • 7942 просмотра
Пригласить эксперта
Ответы на вопрос 3
delphinpro
@delphinpro Куратор тега CSS
frontend developer
Слайдер нужно инициализировать после того как он станет видимым (насколько я понял — у вас модальное окно).
Скрытые элементы не имеют ширины и слайдер не может правильно посчитать размеры слайдов.
Ответ написан
webinar
@webinar
Учим yii: https://youtu.be/-WRMlGHLgRg
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 если все ок.
Ответ написан
alex-1917
@alex-1917
Если ответ помог, отметь решением
<script src="js/slick.min.js"></script>
  <script src="js/slick.js"></script>


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

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

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

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

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