Слайдер 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;
});
});
В данном примере мы указали, что стоит автоматически перелистывать слайды.
Итак, как вы можете видеть, слайдер очень прост в установке и настройке, но позволяет делать по-правде шикарные вещи. Спасибо за внимание и до скорого!
-
Создано 24.05.2014 20:13:49
-
Михаил Русаков
Комментарии (6):
Простите, а что означает запись <script src="//code.jquery.com/jquery-1.11.0.min.js"></script>? Почему двойной слэш? В скачанной на указанном сайте папке нет таких файлов.
Ответить
Почему двойной слэш? Потому, что так принято вообще-то. Я перешел по адресу, и там есть файл jquery-1.11.0.min.js который содержит в себе код. А, сама надпись означает, что мы подключаем удаленную библиотеку jQuery.
Ответить
Я думала что должно быть http:// и далее название файла, получается что http можно опустить. Спасибо за ответ
Ответить
Вы очень плохо отвечаете на поставленные вопросы. Не в первый раз замечаю.
Ответить
Здравствуйте! У меня проблема с этой каруселью... Я новичок и в скриптах мало еще разобрался! делаю сайт по шаблону в котором много разных скриптов... когда вставляю весь дистрибутив slick на странице возникают конфликты с jquery.contentcarousel.js .... Помогите разобраться! Спасибо....
Ответить
Здравствуйте миша вот ссылка на слайд с htmlacademy.ru https://up.htmlacademy.ru/htmlcss/16/resources/975#step26. Можно сделать автоматическую прокрутку слайдера, только я не знаю как? Подскажите!
Ответить
Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.