Работа со скриптами. Урок 02. Создание слайдера
Скрипт слайдера мы скачали в прошлом уроке командой
$ bower i slick.js
Также его можно найти в Google - первая ссылка по запросу slick http://kenwheeler.github.io/slick/
- поддерживает responsive - можно задать разное количество слайдов в зависимости от размера экрана: на больших экранах просматривать по 4 слайда, на средних по 2-3, на телефонах по одному
Хорошая практика - подключение скриптов из папки bower_components
<script src="bower_components/jquery/dist/jquery.min.js"></script>
<script src="bower_components/slick-carousel/slick/slick.min.js"></script>
<script src="js/custom.js"></script>
Тогда при обновлении скрипта программой bower не придётся переписывать номер версии в коде, так как bower даёт скриптам постоянные имена, которые при обновлении не меняются.
Что касается стилей, которые находятся в папке slick: slick.css, slick.less, slick.theme.less их лучше скопировать в папку с css и подключить оттуда. Если оставить их на месте, и в стили слайдера вносить изменения, то при обновлении скрипта все эти изменения будут утеряны.
В отличии от других слайдеров, кадры размещаются не в списке, а в блоках:
$('.multiple-items').slick({
infinite: true,
slidesToShow: 3,
});
$('.center').slick({
centerMode: true,
slidesToShow: 3,
});
Центральный слайд имеет класс «slick-center», а значит можно его отдельно оформить.
атрибут следует записывать так
Дополняю.
1. Скачиваем репозиторий здесь https://github.com/kenwheeler/slick
2. В файле index.html перед открывающим <body> подключаем стили слайдера:
<link rel="stylesheet" href="css/slick.css">
<link rel="stylesheet" href="css/slick-theme.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
Перед закрывающим </body> подключаем скрипты
<script src="js/jquery-3.2.1.min.js"></script>
<script src="js/slick.min.js"></script>
<script src="script.js"></script>
</body>
Ещё этот слайдер требует шрифты. Папку fonts из папки слайдера нужно поместить в папку css проекта.
И ещё в папке слайдера нужно найти рисунок ajax-loader.gif и в файле slick-theme.css прописать путь к нему
3. Теперь диву-обёртке слайдера присваиваем класс, например, multiple-items
А в файле script.js пишем код
$(document).ready(function(){
$('.multiple-items').slick({
autoplay: false,
autoplaySpeed: 6000,
arrows: true,
infinite: true,
dots: true,
centerMode: true,
slidesToShow: 3,
slidesToScroll: 1
});
});
4. Слайдер уже работает. Вот только стрелок не видно, потому что они за границами слайдера, а ширина слайдера у меня во весь экран. Стрелки ищем в файле slick-theme.cssи меняем отступы, так чтобы стрелки оставались внутри слайдера, а не снаружи.
5. Хорошо. Теперь, по моей задумке, центральный слайд слайдера должен отличаться от боковых.
Здесь пишут, что достаточно прописать в коде
$('.middle').slick({
centerMode: true,
//центруем текущий слайд
centerPadding: '50px',
//слегка увеличиваем текущий слайд
slidesToShow: 3
//выводим 3 слайда для просмотра
});
...чтобы увеличить размер центрального слайдера. На самом деле такой способ не работает
Увеличила центральный слайд стилем
.slick-center {
background-color: #8cc63f;
transform: scale(1.3);
}
Ссылки на посты об использовании слайдера
http://realadmin.ru/saytostroy/slick-slider.html
https://vaden-pro.ru/blog/java-script/slayder-slick
http://www.webmasterhelp.ru/jquery/slick-slajder/
$ bower i slick.js
Также его можно найти в Google - первая ссылка по запросу slick http://kenwheeler.github.io/slick/
Преимущества слайдера:
- поддерживает touch events - можно просматривать с телефона, листая пальцем- поддерживает responsive - можно задать разное количество слайдов в зависимости от размера экрана: на больших экранах просматривать по 4 слайда, на средних по 2-3, на телефонах по одному
Хорошая практика - подключение скриптов из папки bower_components
<script src="bower_components/jquery/dist/jquery.min.js"></script>
<script src="bower_components/slick-carousel/slick/slick.min.js"></script>
<script src="js/custom.js"></script>
Тогда при обновлении скрипта программой bower не придётся переписывать номер версии в коде, так как bower даёт скриптам постоянные имена, которые при обновлении не меняются.
Что касается стилей, которые находятся в папке slick: slick.css, slick.less, slick.theme.less их лучше скопировать в папку с css и подключить оттуда. Если оставить их на месте, и в стили слайдера вносить изменения, то при обновлении скрипта все эти изменения будут утеряны.
В отличии от других слайдеров, кадры размещаются не в списке, а в блоках:
<div class="js-slider-slick">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
</div>
Вызов без параметров
При вызвове плагина без параметров получаем простой вариант с одним слайдом на странице и навигационные стрелки.$('.single-item').slick();
Показ нескольких слайдов
В примере мы установили для «slick slider» параметры зацикленной прокрутки, включили отображение навигационных точек, указали количество отображаемых и прокручиваемых слайдов.$('.multiple-items').slick({
infinite: true,
//зацикленный слайдер - после последнего слайда идёт первый
dots: true, //точки под слайдером, показывающие активный слайд
slidesToShow: 3,
//количество слайдов, которые выводятся на экране
slidesToScroll: 1 //количество слайдов, которые перелистываются за один раз
});
Режим центрирования
В режиме центрирования активный слайд устанавливается по центру.$('.center').slick({
centerMode: true,
slidesToShow: 3,
});
Центральный слайд имеет класс «slick-center», а значит можно его отдельно оформить.
Адаптивность
В слайдере можно настроить адаптивный вывод определенного количества слайдов в зависимости от значения ширины экрана. К примеру, вам необходимо, чтобы при ширине экрана менее 600 пикселей выводилось только 2 слайда, а переключались они по одному. Решение данной задачи будет выглядеть так$('.uncycle').slick({
infinite: false,
speed: 350,
// определяем скорость перелистывания
slidesToShow: 4,
//количество слайдов для показа
slidesToScroll: 2,
//сколько слайдов за раз перелистнется
responsive: [
{
breakpoint: 600,
//сообщает, при какой ширине экрана нужно включать настройки
settings: {
slidesToShow: 2,
slidesToScroll: 1,
infinite: true,
}
}
]
});
Плавное переключение
В стандартном состоянии слайдер осуществляет резкую замену слайдов. Но функционал Slick предусматривает плавный режим замены слайдов. Для этого нужно прибегнуть к атрибуту data-lazy, в котором прописывается путь к картинке. Атрибут нужно присвоить не обертке, а именно тегу изображения. Это позволит избежать использование js-кода. Альтернативой будет эта командаlazyLoad: 'ondemand'
<img data-lazy =" images/slaid.jpg">
Плавное переключение без перемещения
Особенность такого слайдера заключается в том, что на экране находится только один слайд, который при переключении постепенно переходит в следующий. Эффект основан на принципе плавного увеличения прозрачности. То есть выбирается определенный временной отрезок, в течении которого прозрачность первого слайда изменяется от 0% до 100%, за счет чего становится видным следующий слайд. Скрипт такого слайдера будет выглядеть так$('.fade').slick({
infinite: true,
speed: 400,
fade: true,
cssEase: 'linear'
});
Slick является наиболее универсальным и простым в использовании
слайдером на сегодняшний день. Широкий интервал настроек слайдера
охватывает великое множество решений реализации слайдеров, что является,
наверно, самым весомым преимуществом этого слайдера.
Настройка slick slider
- аccessibility – начальное значение этого параметра установлено как true, он отвечает за подключения навигационных кнопок для слайдера – это стрелки вперед и назад, а также кнопки в виде точек.
- adaptiveHeight – применяется только к одиночному слайдеру, у которого будет изменятся высота родительского контейнера в зависимости от высоты слайдера. В начальных условиях настройка не подключена.
- autoplay – настраивает перелистывание слайдов в автоматическом режиме, без вмешательства пользователя. Стандартное значение этой настройки соответствует false.
- autoplaySpeed – этот параметр является вспомогательным для autoplay и устанавливает промежуток времени, по истечении которого будет осуществлено автоматическое перелистывание слайда. Изначально для него прописано значение 3000 миллисекунд.
- arrows – подключает к слайдеру стрелки вперед и назад. С помощью таблицы внешних стилей можно изменять положение и внешний вид этих стрелок.
- asNavFor – устанавливает навигационную связь между двумя слайдерами посредством идентификатора или класса. В начальных условиях параметр соответствует нулевому значению.
- prevArrow – позволяет изменить внешний вид стандартной навигационной стрелки, которая отлистывает предыдущий слайд.
- nextArrow – аналогичен функциям предыдущему параметру, но отвечает за стрелку, переключающую слайд вперед.
- centerMode – фиксирует текущий слайд по центру родительского контейнера, изначально параметр выключен.
- centerPadding – при включенном центральном режиме показа текущего слайда (предыдущий параметр) устанавливает для этого слайда внутренний отступ, что визуально позволяет увеличивать текущий слайд.
- cssEase – отвечает за анимацию переключения картинок, может делать ее плавной или более резкой. Принимает стандартное значение 'ease'.
- customPaging – позволяет вставлять собственный шаблон для просмотра слайдера.
- dots – подключает точки-переключатели, по умолчанию находится в выключенном состоянии.
- draggable – подключает возможность перелистывания слайдов зажатием мышки. То есть, если навести на слайдер курсор мыши, зажать ее и передвинуть в сторону, то и слайд переключится на следующий.
- fade – создает эффект затухания слайда при переключении, анимационный эффект.
- focusOnSelect – фокусирует заданный элемент слайдера.
- easing – позволяет установить особый анимационный режим при переключении картинок.
- edgeFriction – отключает переключение слайдов на последнем элементе. Срабатывает только в том случае, если слайдер не зациклен.
- infinite – зацикливает показ слайдов. Это значит при переключении последней картинки слайд-шоу начнется сначала.
- initialSlide – определяет картинку, с которой начнется показ слайд-шоу. По умолчанию слайдер для старта выбирает первое по порядку изображение.
- lazyLoad – позволяет установить режим подгрузки следующих слайдов. Доступно только 2 значения для настройки: 'ondemand' и 'progressive', причем последнее является значением по умолчанию.
- pauseOnHover – останавливает перелистывание слайдов при наведении курсора мыши на тело слайдера. Работает, только если определено автоматическое переключение слайдов.
- pauseOnDotsHover - останавливает перелистывание слайдов при наведении курсора мыши на точечные переключатели. Работает, только если определено автоматическое переключение слайдов.
- respondTo – вызывает реакцию на изменения ширины окна браузера. Для использования доступны три значения: 'window', 'slider' или 'min'.
- responsive – позволяет адаптировать настройки слайдера под ширину экрана. Отличается от предыдущей настройки тем, что ограничение ширины определяется точным значением в пикселях. Используется для адаптивной верстки под мобильные устройства.
- slidesToShow – позволяет установить количество картинок, выводимых в видимой зоне. Изначально показывается 1 слайд, но этим значением можно варьировать.
- slidesToScroll – сообщает слайдеру сколько нужно поменять картинок при переключении.
- speed – фиксирует скорость, с которой будет осуществляться переключение слайдов.
- variableWidth – адаптирует ширину контейнеров слайдера под ширину каждой показываемой картинки.
Дополняю.
1. Скачиваем репозиторий здесь https://github.com/kenwheeler/slick
2. В файле index.html перед открывающим <body> подключаем стили слайдера:
<link rel="stylesheet" href="css/slick.css">
<link rel="stylesheet" href="css/slick-theme.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
Перед закрывающим </body> подключаем скрипты
<script src="js/jquery-3.2.1.min.js"></script>
<script src="js/slick.min.js"></script>
<script src="script.js"></script>
</body>
Ещё этот слайдер требует шрифты. Папку fonts из папки слайдера нужно поместить в папку css проекта.
И ещё в папке слайдера нужно найти рисунок ajax-loader.gif и в файле slick-theme.css прописать путь к нему
3. Теперь диву-обёртке слайдера присваиваем класс, например, multiple-items
А в файле script.js пишем код
$(document).ready(function(){
$('.multiple-items').slick({
autoplay: false,
autoplaySpeed: 6000,
arrows: true,
infinite: true,
dots: true,
centerMode: true,
slidesToShow: 3,
slidesToScroll: 1
});
});
4. Слайдер уже работает. Вот только стрелок не видно, потому что они за границами слайдера, а ширина слайдера у меня во весь экран. Стрелки ищем в файле slick-theme.cssи меняем отступы, так чтобы стрелки оставались внутри слайдера, а не снаружи.
5. Хорошо. Теперь, по моей задумке, центральный слайд слайдера должен отличаться от боковых.
Здесь пишут, что достаточно прописать в коде
$('.middle').slick({
centerMode: true,
//центруем текущий слайд
centerPadding: '50px',
//слегка увеличиваем текущий слайд
slidesToShow: 3
//выводим 3 слайда для просмотра
});
...чтобы увеличить размер центрального слайдера. На самом деле такой способ не работает
Увеличила центральный слайд стилем
.slick-center {
background-color: #8cc63f;
transform: scale(1.3);
}
Ссылки на посты об использовании слайдера
http://realadmin.ru/saytostroy/slick-slider.html
https://vaden-pro.ru/blog/java-script/slayder-slick
http://www.webmasterhelp.ru/jquery/slick-slajder/