Привет всем и сегодня я расскажу про очень классный, а главное простой слайдер - slick .
Привет всем и сегодня я расскажу про очень классный, а главное простой слайдер - slick.
Зайдите на сайт http://kenwheeler.github.io/slick/ Там вы сможете найти очень много примеров работы слайдера slick. У данного слайдера правда очень много самых разных эффектов и, также, есть прокрутка мышкой. Т.е. вы можете нажать на какой-нибудь элемент в слайдере левой кнопкой мышки и, удерживая ее, перемотать слайдер влево или вправо. Эта функция не совсем полезна для компьютеров, но на смартфонах и планшетах - самое то!
Итак, чтоб его подключить, скачайте файлы с сайта, данного выше. Теперь создадим html и подключим необходимые компоненты, в частности jquery, т.к. слайдер использует эту библиотеку для своей работы.
<div class="your-class">
<div>your content</div>
<div>your content</div>
<div>your content</div>
</div>
Подключите стили
<link rel="stylesheet" href="slick/slick.css"/>
И подключите скрипты
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script src="slick/slick.min.js"></script>
Чтобы инициализировать слайдер, в теге script пропишите следующее:
$(document).ready(function(){
$('.your-class').slick({
setting-name: setting-value
});
});
В конечном итоге ваш html файл будет выглядеть примерно так:
<html>
<head>
<title>Slick</title>
<link rel="stylesheet" href="slick/slick.css"/>
</head>
<body>
<div class="your-class">
<div>your content</div>
<div>your content</div>
<div>your content</div>
</div>
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script src="slick/slick.min.js"></script>
<script>
$(document).ready(function(){
$('.your-class').slick({
setting-name: setting-value
});
});
</script>
</body>
</html>
У данного слайдера немало установок, которые вы можете задать сами. Найти их все вы можете все на том же сайте внизу страницы в табличке. Задавать их стоит при инициализации в объекте.
$(document).ready(function(){
$('.your-class').slick({
autoplay: true;
});
});
В данном примере мы указали, что стоит автоматически перелистывать слайды.
Итак, как вы можете видеть, слайдер очень прост в установке и настройке, но позволяет делать по-правде шикарные вещи. Спасибо за внимание и до скорого!
