слайдер slick не могу подключить.
Добрый день. Подскажите пожалуйста, как использовать этот слайдер? Смотрел, читал, ничего не понял.
http://kenwheeler.github.io/slick/ Если не сложно, помогите примером самого простого из них. Спасибо. |
А вы читали что там написано или просто картинки посмотрели?
|
<html>
<head>
<title>My Now Amazing Webpage</title>
<link rel="stylesheet" type="text/css" href="slick/slick.css"/>
<link rel="stylesheet" type="text/css" href="slick/slick-theme.css"/>
</head>
<body>
<div class="your-class">
<div>your content</div>
<div>your content</div>
<div>your content</div>
</div>
<script type="text/javascript" src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script type="text/javascript" src="slick/slick.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('.your-class').slick({
setting-name: setting-value
});
});
</script>
</body>
</html>
там расписано все несколько раз |
пути только свои укажите
|
Пример кода с указанного сайта:
<html>
<head>
<title>My Now Amazing Webpage</title>
<link rel="stylesheet" type="text/css" href="slick/slick.css"/>
<link rel="stylesheet" type="text/css" href="slick/slick-theme.css"/>
</head>
<body>
<div class="your-class">
<div>your content</div>
<div>your content</div>
<div>your content</div>
</div>
<script type="text/javascript" src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script type="text/javascript" src="slick/slick.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('.your-class').slick({
setting-name: setting-value
});
});
</script>
</body>
</html>
|
Я это видел, и читал. Ну и на том спасибо. Разобрался практически со всем. Только вот не совсем понятно, стили подключенные тегом <style type="text/css"> в <head>, к каким элементам по классу обращаются? К библиотеке? У меня нет в html таких классов.
<!DOCTYPE html>
<html>
<head>
<title>Slick Playground</title>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="slick/slick.css">
<link rel="stylesheet" type="text/css" href="slick/slick-theme.css">
<style type="text/css">
html, body {
margin: 0;
padding: 0;
}
* {
box-sizing: border-box;
}
.slider {
width: 50%;
margin: 100px auto;
}
.slick-slide {
margin: 0px 20px;
}
.slick-slide img {
width: 100%;
}
.slick-prev:before,
.slick-next:before {
color: black;
}
.slick-slide {
transition: all ease-in-out .3s;
opacity: .2;
}
.slick-active {
opacity: .5;
}
.slick-current {
opacity: 1;
}
</style>
</head>
<body>
<section class="vertical-center-4 slider">
<div>
<img src="http://placehold.it/350x100?text=1">
</div>
<div>
<img src="http://placehold.it/350x100?text=2">
</div>
<div>
<img src="http://placehold.it/350x100?text=3">
</div>
<div>
<img src="http://placehold.it/350x100?text=4">
</div>
<div>
<img src="http://placehold.it/350x100?text=5">
</div>
<div>
<img src="http://placehold.it/350x100?text=6">
</div>
<div>
<img src="http://placehold.it/350x100?text=7">
</div>
<div>
<img src="http://placehold.it/350x100?text=8">
</div>
<div>
<img src="http://placehold.it/350x100?text=9">
</div>
<div>
<img src="http://placehold.it/350x100?text=10">
</div>
</section>
<script src="https://code.jquery.com/jquery-2.2.0.min.js" type="text/javascript"></script>
<script src="./slick/slick.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(document).on('ready', function() {
$(".vertical-center-4").slick({
centerMode: true,
centerPadding: '60px',
slidesToShow: 3,
responsive: [
{
breakpoint: 768,
settings: {
arrows: false,
centerMode: true,
centerPadding: '40px',
slidesToShow: 3
}
},
{
breakpoint: 480,
settings: {
arrows: false,
centerMode: true,
centerPadding: '40px',
slidesToShow: 1
}
}
]
});
});
</script>
</body>
</html>
|
Javany11,
Библиотека сама создает элементы и присваивает им классы, и чтобы это все корректно отображалось подключатся CSS. |
Javany11,
Ну раз стили не нужны, то убери их. |
Цитата:
|
Javany11, css-файл библиотеки нужен, без него она, вероятно, корректно работать не будет.
В процессе инициализации слайдера необходимые элементы будут созданы "автоматически", их-то и описывает css-файл. |
| Часовой пояс GMT +3, время: 15:53. |