slick - комплексное решение по созданию функционала карусели, в различных ее проявлениях. Демо и типовые варианты, и исходники можно посмотреть/скачать .
Отсекаем лишнееВ базовой комплектации у slick присутствует несколько скриптов, несколько стилей, собственный шрифт. Я использую усеченную версию:
- slick.min.js (минимизированный)
- slick.css (+ можно почистить стили )
- slick-theme.css (+ можно почистить стили )
Стили, при желании можно объединить в один.
Ссылки на шрифт slick я заменяю на более удобный FontAwesome
Основной функционал карусели задает div class=»multiple-items». div class=»carousel» нужен только для задания отступов от карусели.
Скрипт инициализации скрипта
$(document).ready(function() { $(".multiple-items").slick({ //infinite: true, //прокрутка по кругу autoplay: true, slidesToShow: 3, slidesToScroll: 3 }); });
Slick-slider {width: 100%; float: left;} .slick-slide {cursor: pointer;} .multiple-items .slick-slide {margin: 0 15px;} .carousel {padding: 0 3%; float: left; width: 100%; box-sizing: border-box;} /* для товаров woocommerce */ .carousel .woocommerce ul.products li.product {margin: 1em 0 1.992em 0; width: 100%;}
Карусель для товаров woocommerce
Немного упростил вывод товаров для карусели (!не универсальное решение, в различных вариантах верстки может отображаться по разному):
При загрузке скриптов карусели происходят перекосы в верстке. Создадим изначальные стили, которые будут держать карусель в рамках текущей верстки:
Multiple-items {display: flex !important; flex-wrap: wrap; margin-bottom: 25px;} .multiple-items img { -moz-backface-visibility: visible; -webkit-backface-visibility: visible; backface-visibility: visible; } .slick-list {margin: 0 -1px 0 0 !important; padding: 0 1px 0 0 !important; width: 100%;} .slick-track {border: solid #e9eaec; border-width: 0 0 0 1px; display: flex !important; padding-bottom: .1rem;} .carousel .product { border: solid #e9eaec; border-width: 1px 1px 1px 0; background: #fff; padding: 15px; list-style: none; text-align: center; position: relative; margin-bottom: -.1rem; height: auto; } .multiple-items > .product {width: 25%;}
Свойства backface для изображений указал, т.к. если оставить hidden то при перемотке они скрываю лэйблы .
Адаптивность каруселиСкрипт можно настраивать под различные разрешения экрана. Для этого в настройках прописываем параметры responsive
Responsive: [ { breakpoint: 1280, settings: { slidesToShow: 4, slidesToScroll: 4, } }, { breakpoint: 1024, settings: { slidesToShow: 3, slidesToScroll: 3, } }, { breakpoint: 800, settings: { slidesToShow: 2, slidesToScroll: 2 } }, { breakpoint: 480, settings: { slidesToShow: 1, slidesToScroll: 1 } } ]
Либо вовсе отключить при определенном разрешении - settings: «unslick»
Slick слайдерВ последнее время основной слайдер также делаю на основе slick. Есть небольшая проблема — при загрузке страницы на какие-то доли секунд выводятся все слайды, а после складываются. Это я замаскировал так:
Делаем все, кроме одного слайда невидимыми:
Slick-track > div:nth-child(2) img {display: block !important;} #index-slider img {display: none;}
А при загрузке страницы включаем и остальные:
JQuery(document).ready(function(){ jQuery("#index-slider img").css("display", "block"); });
Подгрузка слайдов
Slick обладает еще одной полезной функцией lazyload (). Нужно только добавить в скрипт свойство lazyLoad: ‘ondemand’ . И изменить вывод изображения:
или еще можно упростить так:
">
А чтобы слайды наоборот загружались изначально нужно прописывать свойство lazyLoad: ‘progressive’
Штатная подгрузка изображений работает не вполне корректно, рекомендую использовать в связке с lazyload .
Мобильная версия слайдера
Можно увеличить в моб. версии высоту слайдера, при этом обрежутся края у изображений, но зато картинка будет больше:
@media screen and (max-device-width: 480px) { #index-slider, .hotel-photos {height: 200px;} .slick-list, .slick-track {height: 100%;} #index-slider img, .hotel-photos img {height: 100%; object-fit: cover;} }
object-fit: cover; - классное свойство CSS 3, поддерживается большинством браузеров
Галерея SlickНедавно на одном из сайтов обратил внимание на интересное использование Slick в виде галереи. Особенность в том, что изображения галереи доходят до краев экрана (верста сайта во весь экран).
Для реализации необходимо поместить слайдер (#index-slider) в контейнер (.s2), и прописать следующие стили:
S2 {overflow: hidden; display: block;} #index-slider {max-width: 1000px; margin: 0 auto;} .s2 .slick-list {overflow: visible;} #index-slider .slick-slide img {max-width: 800px; margin: 0 auto;}
или еще проще:
Чтобы сделать такую галерею достаточно прописать 2 стиля:
#index-slider {max-width: 1280px; margin: 0 auto;} #index-slider .slick-list {overflow: visible;}
Помимо прочего, слайдер поддерживает перелистывание путем перетаскивания элементов на сенсорном дисплее, что несомненно порадует посетителей вашего сайта, использующих смартфон или планшет.
Итак, слайдер имеет название slick.js. . Для подключения слайдера на сайте, вставьте код в head вашего сайта следующие строки:
Вот и все! Слайдер готов к работе. Теперь все, что вам остается, это подключить его к необходимым элементам. Пишем html:
СОДЕРЖМОЕ 1 СОДЕРЖМОЕ 2 СОДЕРЖМОЕ 3 СОДЕРЖМОЕ 4
и подключаем к нему слайдер (этот код лучше разместить в секции head) :
$(document).ready(function(){ $(".my-slider").slick({ //setting }); });
После таких несложных манипуляций ваш слайдер slick начнет работать с настройками по-умолчанию.
Вместо СОДЕРЖМОЕ 1 , СОДЕРЖМОЕ 2 и других вы можете разместить любой контент - картинки, закголовки, параграфы и прочее. Например, для интернет магазина можно сделать ротатор товара:
$(document).ready(function(){
$(".product-slider").slick({
//setting
});
});
Веник пластиковый
Веник из древесины
Можно добавить неограниченное число элементов в ротатор.
Также слайдер поддерживает множество настроек - количество отображаемых элементов, количество прокручиваемых элементов, вертикальный или горизонтальный слайдер, скорость прокрутки и прочее.
Также можно настроить количество отображаемых элементов для различных разрешений дисплеев:
$(document).ready(function(){ $(".product-slider").slick({ responsive: [ { breakpoint: 1024, // для дисплеев до 1024px и более settings: { slidesToShow: 3, // количество отображаемых элементов 3 slidesToScroll: 3, // количество прокручиваемых элементов за раз 3 dots: true // отображать точки (по количеству элементов) } }, { breakpoint: 600, // для дисплее менее 600px settings: { slidesToShow: 2, // количество отображаемых элементов 2 slidesToScroll: 2 // количество прокручиваемых элементов за раз 2 } }, { breakpoint: 480, // для дисплее менее 480px settings: { slidesToShow: 1, // количество прокручиваемых элементов за раз 1 slidesToScroll: 1 // количество прокручиваемых элементов за раз 1 } } ] }); });
С более подробными настройками можно ознакомиться на
Привет друзья. Сегодня поговорим об адаптивных jQuery слайдерах, которые помогут украсить ваш landing page, грамотно структурировать информацию и лаконично подать ее.
Когда-то я проводил опрос в социальных сетях и просил предложить какой-нибудь стоящий скрипт слайдера, которым вы пользуетесь сами. Особого успеха пост не набрал, но мне посоветовали отличный инструмент, который сегодня и будет на первом месте. За что — большое спасибо. Может быть, после этой статьи кто-то посоветует еще более качественный скрипт.
ТОП скриптов, реализующих слайдер на сайтеТак как все представленные ниже скрипты являются jQuery плагинами, то они легко встраиваются как на обычные html сайты, так и на любые CMS и многие .
Owl Carousel 2На мой взгляд Owl Carousel 2 — лучший jQuery слайдер из бесплатных. Масса настроек, наличие API и возможность полной кастомизации. Все это влюбило в себя с первого взгляда. Отлично реагирует на смартфонах и планшетах, поддерживает перелистывание Swip(ом) и многое другое.
Slick slider
На второе место, сейчас, я бы поставил Slick slider . Достаточно интересный вариант, которым я пользовался некоторое время. Для задач landing page меня вполне устраивал. Оформить комментарии, логотипы брендов и партнеров, со всем этим этот слайдер справлялся на ура. Есть возможность пользоваться методами и событиями, а также выводить слайдер в нескольких местах на странице.
Sudo slider
Обзор установки слайдера slick под библиотеку jQuery. Данный плагин занимает одно из наиболее высоких мест в рейтинге плагинов для создания слайдшоу - .
Наверное, это место он получил заслуженно, поэтому стоит с ним разобраться и положить в свою копилочку веб-разработчика. Домашняя страничка плагина с описание установки и различных примеров работы находится здесь - slick Demos . Плагин мне понравился всем - он имеет в своем составе все функции управления, легок и прост в установке, HTML-разметка для его создания проста и семантична. В комплекте плагин slick имеет полный набор настроек, которые легко подключить в файле конфигурации.
Подключение плагина slickПроцесс подключения плагина slick в рабочем проекте очень прост, только нужно соблюдать правильность выполнения шагов.
Создание разметки под slickHTML-разметка под плагин slick семантична и проста. Достаточно создать список с произвольным именем класса. В руководстве Getting Started на официальной странице плагина slick приводится такой пример HTML-разметки:
Моя попытка создать слайдер на основе HTML-разметки в виде обычного маркированного списка:
… успеха не принесла - плагин slick не заработал! Возможно, стоит через CSS-стили преобразовать элементы
| 1 | ul |
| 1 | li |
Следующим шагом будет получение архива плагина slick. Это можно сделать несколькими способами. Первый - это скачать его со страницы Go Get It . Или же перейти на страницу GitHub автора и забрать оттуда zip-архив плагина - slick GitHub . В обоих случаях получим архив с именем
HTML-документа производим подключение готовых CSS-стилей плагина slick:В теле HTML-документа перед закрывающим тегом
| 1 |
Как видим, в первых двух строках производится скачивание библиотеки jQuery-1.11.0 и плагина jQuery Migrate 1.2.1 через CDN. Третий плагин
подключаем скрипт инициализации плагина: $ (document ). ready (function (){ $ (".slider" ). slick ({ dots : true }); });Итоговая HTML-разметка и подключение CSS-таблиц, JS-скриптов будет выглядеть таким образом:
Мне хочется упомянуть о такой полезной вещи, как консоль браузера Google Chrome. Почему она полезная? Потому что она уже второй раз выручает меня (первый раз это было с плагином jqFancyTransitions - Слайдер jqFancyTransitions) и помогает найти ошибки при подключении скриптов в HTML-документе. Незаменимая штука!
Чтобы проиллюстрировать пример использования и полезности консоли Chrome, запускаю в браузере индексный index.html файл, который создал ранее.
И что?! Позвольте, а где-же плагин slick - где слайдер, созданный с его помощью? Где те обещанные красоты, которые так ярко продемонстрированы на официальной странице проекта - Demos ?! Странно - но их нет!
Хех, а я правильно выполнил подключение скрипта? Ну-ка, еще раз “пробегусь” по документации… Все верно, но у меня ничего не работает… Может, все-же переписать индексную страницу заново? Может быть, но таких “а может” наберется большое количество, с различными вариациями…
Но давайте я открою консоль браузера Google Chrome и перейду в ней на вкладку “Network”:
Вот и причина того, что плагин slick не работает на моей странице! Просто библиотеку jQuery 1.11.0 и ее плагин jQuery Migrate 1.2.1 браузеру Chrome не удалось подгрузить через CDN. Сколько бы я еще потратил времени и нервов, чтобы методом “научного тыка” определить причину “поломки”, если бы не эта консоль, неизвестно.
Разбираться, почему не удалось браузеру подгрузить оба этих файла через CDN, у меня нет ни желания, ни времени. Поэтому я просто скачаю оба этих файла “вручную” и подключу локально:
Снова запускаю индексную страницу index.html в браузере Google Chrome и … о Чудо! Плагин slick работает:
Картинки прокручиваются автоматически и внизу видна пагинация, сгенерированная скриптом slick согласно настройкам:
dots : true , autoplay : true… в конфигурационном файле. Помимо этого, были сгенерированы стрелки для перемотки изображений “вручную” взад-вперед (они не видны на белом фоне HTML-страницы). Другие многочисленные настройки плагина slick можно посмотреть на официальной странице - Settings .
NOTE: I highly recommend putting your initialization script in an external JS file.
В этой статье я так не поступил по одной простой причине - ради наглядности примера и быстроты его создания.
Редактирование плагина slickТеперь осталось дело за малым - вооружившись инспектором элементов страницы (к примеру, Firebug), “вытащим” из DOM-дерева нашей страницы имена классов нужных нам элементов и произведем их легкое редактирование через CSS-правила:
body { background-color : lighten (#ccc , 5% ); .slider{ width : 300px ; margin : 10px auto ; padding : 5px ; background-color : #ccc ; border : 3px solid #000 ; @include border-radius(3px); .slick-dots{ bottom : -30px ; } } }Создаю для тела HTML-документа
добавлю padding, границу со скруглением и фоновую заливку; отцентрирую его на странице и немного опущу вниз. А также немного приподниму вверх блок| 1 | .slick-dots |
Смотрим результат:
Плагин slick мне однозначно понравился. Простая установка и подключение, генерирование элементов управления показом слайдшоу, большое количество разнообразных настроек. С разнообразными вариантами настройки внешнего вида можно и нужно разобраться на странице примеров - Demos . И подогнать под необходимые конкретные условия, если потребуется.
Удачного кодинга!
Здравствуйте, хочу рассказать Вам о слайдере slick slider для сайта который показал себя как легкий, универсальный и простой в установке. На нем можно реализовать все что связано со слайдерами и каруселями. Как заявляет создатель плагин «the last carousel you’ll ever need», что можно трактовать как единственная универсальная карусель которая подойдет для любой вашей задумки. И это действительно так. Чего только в ней нету, от обычного слайдера до адаптивной карусели с слайдами в несколько рядов.
Плагин можно спокойно брать на вооружение как начинающим так и опытным веб разработчикам. Это очень сильный конкурент всем знакомого . Из коробки мы получаем очень многозадачный инструмент.
Чтобы установить слайдер / карусель к себе на сайт достаточно пройти 3 простых шага.
Установка slick sliderПример №1 (Слайдер)1. Шаг — Подключение скрипта и стилей плагина.
вашей html страницы.
$(document).ready(function(){ $(".your-class").slick(); });
Подключать нужно между тегами вашей html страницы, но после кода, который Вы вставляли в шаге №1
На этом примере мы показали как нужно устанавливать slick slider как карусель с одним основным слайдом.
Ниже можете посмотреть наглядный пример то что описано выше.
Пример №2(Карусель)Чтобы установить карусель надо сделать все тоже самое что и в предыдущем описании, но шаг №2 и шаг №3 немного изменим.
2. Шаг — вставка самого html кода слайдера.
Этот код нужно вставить между тегами , в том месте где вы хотите отобразить сам слайдер.
3. Шаг — инициализация слайдера.
$(document).ready(function(){ $(".your-class").slick({ infinite: true, slidesToShow: 3, slidesToScroll: 3 }); });
А в этом примере мы использовали slick slider как карусель (с 3 основным слайдами) и для этого мы использовали некоторые настройки плагина.
Посмотреть работу этой карусели можете на примере ниже.
Как видите всего 3 шага и вы получите карусель или слайдер для ваших нужд. Но возможностей и настроек этого слайдера очень много. Если у Вас возникли трудности либо есть вопросы то задавайте их в комментарии и я постараюсь бистро на них ответить.
