Не работает slick слайдер

146

13 декабря 2018, 21:00

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

$('.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

Попробуйте style.css подключить перед slick-theme.css и slick.css. Скорее всего ваши стили перебивают стили слайдера.

Answer 2

По поводу ошибок в консоли: нужно чтобы файл ajax-loader.gif, и шрифты лежали в папке css, эта папка css должна быть на том же уровне что и файл html. А по поводу того что он не работает: я заметил у Вас в футере подключен файл slick.min.js и slick.js, но нужно подключать только один из них, если Вы не будете изменять сам код плагина то подключайте slick.min.js, может из за этого проблема. Посмотрите еще раз документацию http://kenwheeler.github.io/slick/ или https://github.com/kenwheeler/slick/