Привет всем! Пытаюсь освоить slick-slider. Нашёл сайт, всё скачал, подключил по инструкции. Но есть проблемы: пока что удалось подключить только самый простой вариант. Всё остальное - не могу понять, почему не работает. Прошу помощи. Также не могу объяснить:
1. "setting-name": "setting-value" - мне пришлось заключить в кавычки, чтобы В ПРИНЦИПЕ нечто появилось на странице. Хотя на сайте библиотеки -
http://kenwheeler.github.io/slick/- пример показан БЕЗ кавычек. Почему?
2. Скрипт, судя по всему, работает, т.к. появляется самый простой вариант слайдера. Однако добавление - опять же, с того же сайта части, чтобы в слайдере одновременно отображалось 3 слайда (прикрепил) никакого действия не оказывает.
3. Стрелки вправо-влево: пришлось изменить стили, чтобы "вывести" их наружу - иначе не были видны. Хотя стили в библиотеке, согласно инспектору браузера, такие, что они уже при инициализации слайдера должны быть видны без вмешательства в стили.
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="slick/slick/slick.css"/>
<link rel="stylesheet" type="text/css" href="slick/slick/slick-theme.css"/>
<link href="css/style.css" rel="stylesheet">
</head>
<body>
<div class="wrapper">
<div class="your-class">
<div class="multiple-items">1</div>
<div class="multiple-items">2</div>
<div class="multiple-items">3</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script type="text/javascript" src="slick/slick/slick.min.js"></script>
<script src="js/script.js"></script>
</body>
</html>
|
Код:
|
body {
background: lightblue;
}
.wrapper {
overflow: hidden;
}
.your-class {
width: 1200px;
padding: 0 50px;
margin: 0 auto;
overflow: hidden;
}
.slick-track {
height: 300px;
}
.slick-slide {
margin: 0 10px;
font-size: 116px;
font-weight: 700;
background: white;
text-align: center;
line-height: 300px;
}
.slick-arrow {
background: green;
z-index: 100;
}
.slick-prev::before,
.slick-next::before {
content: '';
}
.slick-prev {
left: 0;
}
.slick-next {
right: 0;
} |
$(document).ready(function(){
$('.your-class').slick({
"setting-name": "setting-value"
});
$('.multiple-items').slick({
infinite: true,
slidesToShow: 3,
slidesToScroll: 3
});
});
