Здравствуйте, хочу рассказать Вам о слайдере 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 шага и вы получите карусель или слайдер для ваших нужд. Но возможностей и настроек этого слайдера очень много. Если у Вас возникли трудности либо есть вопросы то задавайте их в комментарии и я постараюсь бистро на них ответить.
Привет друзья. Сегодня поговорим об адаптивных jQuery слайдерах, которые помогут украсить ваш landing page, грамотно структурировать информацию и лаконично подать ее.
Когда-то я проводил опрос в социальных сетях и просил предложить какой-нибудь стоящий скрипт слайдера, которым вы пользуетесь сами. Особого успеха пост не набрал, но мне посоветовали отличный инструмент, который сегодня и будет на первом месте. За что — большое спасибо. Может быть, после этой статьи кто-то посоветует еще более качественный скрипт.
ТОП скриптов, реализующих слайдер на сайтеТак как все представленные ниже скрипты являются jQuery плагинами, то они легко встраиваются как на обычные html сайты, так и на любые CMS и многие .
Owl Carousel 2На мой взгляд Owl Carousel 2 — лучший jQuery слайдер из бесплатных. Масса настроек, наличие API и возможность полной кастомизации. Все это влюбило в себя с первого взгляда. Отлично реагирует на смартфонах и планшетах, поддерживает перелистывание Swip(ом) и многое другое.
Slick sliderНа второе место, сейчас, я бы поставил Slick slider . Достаточно интересный вариант, которым я пользовался некоторое время. Для задач landing page меня вполне устраивал. Оформить комментарии, логотипы брендов и партнеров, со всем этим этот слайдер справлялся на ура. Есть возможность пользоваться методами и событиями, а также выводить слайдер в нескольких местах на странице.
Sudo sliderslick - комплексное решение по созданию функционала карусели, в различных ее проявлениях. Демо и типовые варианты, и исходники можно посмотреть/скачать .
Отсекаем лишнееВ базовой комплектации у slick присутствует несколько скриптов, несколько стилей, собственный шрифт. Я использую усеченную версию:
Стили, при желании можно объединить в один.
Ссылки на шрифт 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 .
Зайдите на сайт http://kenwheeler.github.io/slick/ Там вы сможете найти очень много примеров работы слайдера slick . У данного слайдера правда очень много самых разных эффектов и, также, есть прокрутка мышкой. Т.е. вы можете нажать на какой-нибудь элемент в слайдере левой кнопкой мышки и, удерживая ее, перемотать слайдер влево или вправо. Эта функция не совсем полезна для компьютеров, но на смартфонах и планшетах - самое то!
Итак, чтоб его подключить, скачайте файлы с сайта, данного выше. Теперь создадим html и подключим необходимые компоненты, в частности jquery , т.к. слайдер использует эту библиотеку для своей работы.
your content
your content
your content
Подключите стили
И подключите скрипты
Чтобы инициализировать слайдер, в теге script пропишите следующее:
$(".your-class").slick({
setting-name: setting-value
});
});
В конечном итоге ваш html файл будет выглядеть примерно так:
Slick
your content
your content
your content
$(document).ready(function(){
$(".your-class").slick({
setting-name: setting-value
});
});
У данного слайдера немало установок, которые вы можете задать сами. Найти их все вы можете все на том же сайте внизу страницы в табличке. Задавать их стоит при инициализации в объекте.
$(document).ready(function(){ $(".your-class").slick({ autoplay: true; }); });
В данном примере мы указали, что стоит автоматически перелистывать слайды.
Итак, как вы можете видеть, слайдер очень прост в установке и настройке, но позволяет делать по-правде шикарные вещи. Спасибо за внимание и до скорого!
В статье приведен обзор установки и работы слайдера slick. Рассмотрены возможные варианты реализации слайдера, особенности переключения слайдов и способ вывода.
Довольно часто на различных интернет ресурсах можно встретить такой функциональный прием, как слайдер. Слайдером является несколько произвольных картинок, которые сообщают посетителю о возможных направлениях, в которых работает фирма. Переключения слайдера может быть установлено в автоматическом режиме, то есть по истечению определенного промежутка времени слайды перемещаются самостоятельно. Также стоит отметить, что в видимой зоне могут находиться несколько слайдов. Причем их содержимым может быть не только картинка, а и ссылка, форма обратной связи или какой либо другой функциональный прием.
Существует довольно много разновидностей слайдера и способов его реализации. В этой статье мы рассмотрим работу слайдера slick. Это наиболее распространенный и универсальный слайдер, также стоит отметить простоту его эксплуатации.
Первый шаг для установки слайдера заключается в скачивании плагина. Его можно скачать на ресурсе автора плагина, также там описаны разнообразные параметры для настроек, но на английском языке.
Поле того, как был скачанный архив со слайдером – извлекаем папку в директорию нашего сайта. Если вы просмотрите файлы слайдера, то увидите, что плагин имеет свои таблицы стилей. Соответственно, для того, чтобы они подключились необходимо записать определенный код в зону тега head. Выглядеть это будет примерно так
< link rel= "stylesheet" type= "text/css" href= "slick/slick.css" /> < link rel= "stylesheet" type= "text/css" href= "slick/slick-theme.css" />
Процесс подключения стилей ничем не отличается от обычного подключения файла CSS. После этого необходимо подключить библиотеки слайдера. Они обычно подключаются в отдельном файле, в котором указаны все ссылки на файлы js-кода. Если такого файла у вас нет, то код нужно вставить внутри тега body, а именно до его закрытия. Вот так выглядит этот код
< script type= "text/javascript" src= "//code.jquery.com/jquery-1.11.0.min.js" > < script type= "text/javascript" src= "//code.jquery.com/jquery-migrate-1.2.1.min.js" > < script type= "text/javascript" src= "slick/slick.min.js" >
После этого можно приступать к формированию HTML-тела нашего слайдера. Здесь хочу отметить одну из особенностей slick. Большинство слайдеров строятся с помощью списков, составляющие которых выступают слайдами. Рассматриваемый плагин работает не со списками, а с блочными элементами. Это принципиально важно, так как если слайды будут помещены в список, то код не будет работать. HTML-код слайдера slick должен выглядеть примерно так
< div class = "slick-slider" > < div> Слайд1 < div> Слайд2 < div> Слайд3
Завершающим этапом установки слайдера будет вставка скрипта, который запускает его работу. В тоже время данный скрипт отвечает за настройки работы слайдера. В зависимости от используемых классов и команд мы можем получить разные слайдеры с разным способом представления слайдов и их перелистывания. Подробнее речь пойдет об этом ниже, а сейчас покажем пример скрипта.
$(document) . ready(function () { $(".slick-slider).slick({ setting-name: setting-value }); });
Этот скрипт вставляется в отдельный файл, где собраны все скрипты, работающие на сайте, либо после HTML-тела слайдера в рамках тега script .
Примеры применения разных конфигураций слайдера SlickПервая и самая простая разновидность изучаемого плагина – одиночное представление слайдов. В этом случае у нас будет выводится один слайд на всю ширину экрана. При переключении по стрелкам меняться будет тоже только один слайд. Чтобы реализовать такое решение необходимо в скрипт-активатор вставить следующий код
$(".single-slide" ) . slick() ;
Чисто визуально такой слайдер будет выглядеть примерно так
Не сложно догадаться, что если существует одиночный вариант слайдера, то параллельно с этим можно реализовать и множественный. Другими словами, на экране будут выводится сразу несколько слайдов, причем можно сделать так, чтобы переключались слайды или по одному, или по несколько, или сразу все. Организовывается такой слайдер через следующий скрипт
$(".multiple- slide " ) . slick({ infinite: true , slidesToShow: 3 , //количество слайдов, которые выводятся на экране slidesToScroll: 2 //количество слайдов, которые перелистываются за один раз } ) ;
На практике это будет иметь следующий вид
Не зацикленный слайдерНа практике большинство слайдеров зациклены. Проще говоря, после того, как было показан последний слайд, осуществляется переключение в начало списка и слайдер работает заново. Существует решение, благодаря которому можно создать слайдер без цикла. То есть, дальше последнего слайда переключение не будет совершаться, точно также, как и в обратном направлении, перед первым изображением ничего не будет показываться. Смотрим и запоминаем комбинацию кода, которая подключает такой слайдер
SlidesToShow: 4 , slidesToScroll: 2 , } ) ;
А в браузере получим примерно такую картину
ПримечаниеХочу отметить, что для такого типа слайдера можно настроить адаптивный вывод определенного количества слайдов в зависимости от значения ширины экрана. К примеру, Вам необходимо, чтобы при ширине экрана менее 600 пикселей выводилось только 2 слайда, а переключались они по одному. Решение данной задачи будет выглядеть так
$(".uncycle" ) . slick({ infinite: false , speed: 350 , // определяем скорость перелистывания slidesToShow: 4 , //количество слайдов для показа slidesToScroll: 2 , //сколько слайдов за раз перелистнется responsive: [ { breakpoint: 600 , //сообщает, при какой ширине экрана нужно включать настройки settings: { slidesToShow: 2 , slidesToScroll: 1 , infinite: true , } } ] } ) ;
Переменная ширина и высота слайдовСледующий тип слайдера, который мы рассмотрим, будет с переменной шириной слайдов. Такое решение позволяет нам использовать картинки с разной шириной, что в определенных случаях сохраняет их качество. Также для более красивого вывода можно отцентрировать текущий слайдер.
$(".var-width" ) . slick({ infinite: true , speed: 250 , // определяем скорость перелистывания slidesToShow: 1 , //количество слайдов для показа centerMode: true , //текущий слайд по центру variableWidth: true //установим переменную ширину } ) ;
Существует также аналогичный параметр, который позволяет создать слайдер с переменной высотой слайдов. Для этого требуется последнюю строчку в коде, представленном выше, поменять на
adaptiveHeight: true
Настройка слайдера с помощью атрибутаДля версии Slick 1.5 стало возможным дополнения параметров слайдера через HTML-код посредством атрибута data-slick. Указанный атрибут был специально разработан для исключения использования js-кода в документе HTML. Ниже представлен пример использования атрибута
< div class = "slick-slider" data- slick= "{"slidesToShow": 3, "slidesToScroll": 1}" > < div> Слайд1 < div> Слайд2 < div> Слайд3
Визуальный эффект ничем не буде отличаться от тех случаев, когда мы используем js-код внутри тега script.
Выводим текущий слайдер в центр экранаОчень популярным считается вариант, когда основной слайд, который находится в центре внимания пользователя, устанавливается по середине экрана. При этом крайние слайды выходят слегка за пределы видимой зоны. Это создает неплохой визуальный эффект. Также параллельно с этим сделаем так, чтобы слайд, которому присваивается фокус, слегка увеличивался. Для этого прибавим внутренние отступы для блоков со слайдами, только в случае использования картинок в качестве слайдов эффект будет незаметен. Это выполняется следующим образом
$(".middle" ) . slick({ centerMode: true , //центруем текущий слайд centerPadding: "50px" , //слегка увеличиваем текущий слайд slidesToShow: 3 //выводим 3 слайда для просмотра } ) ;
В итоге получим что-то в этом роде
Плавное переключениеВ стандартном состоянии слайдер осуществляет резкую замену слайдов. Но функционал Slick предусматривает плавный режим замены слайдов. Для этого нужно прибегнуть к атрибуту data-lazy, в котором прописывается путь к картинке. Атрибут нужно присвоить не обертке, а именно тегу изображения. Это позволит избежать использование js-кода. Альтернативой будет эта команда
lazyLoad: "ondemand"
атрибут следует записывать так
< img data- lazy = " images/slaid.jpg" >
Плавное переключение без перемещенияОсобенность такого слайдера заключается в том, что на экране находится только один слайд, который при переключении постепенно переходит в следующий. Эффект основан на принципе плавного увеличения прозрачности. То есть выбирается определенный временной отрезок, в течении которого прозрачность первого слайда изменяется от 0% до 100%, за счет чего становится видным следующий слайд. Скрипт такого слайдера будет выглядеть так
$(".fade" ) . slick({ infinite: true , speed: 400 , fade: true , cssEase: "linear" } ) ;
Синхронизирующийся слайдерЭтот вид слайдера имеет больше особых отличий, чем предыдущие. Эффект синхронизации проявляется в том, что сам слайдер со слайдами отведен на задний план. Ключевую роль играет увеличенное представление текущего слайда. Эта превьюжка располагается над слайдером. Секрет такой анимации заключается в выводе 2 слайдеров, которые синхронно выполняют переключение слайдов, только один из них выводит только один блок, а второй несколько. Скрипт слайдера:
$(".main" ) . slick({ slidesToShow: 1 , slidesToScroll: 1 , arrows: false , fade: true , asNavFor: ".slider-nav" } ) ; $(".second).slick({ slidesToShow: 3, slidesToScroll: 1, asNavFor: " . slider- for ", dots: true, centerMode: true, focusOnSelect: true });
Вот так он будет смотреться на вашем экране
НастройкиКак вы могли уже заметить, ведущую роль в слайдере играет скрипт-активатор. Он привязывает весь функционал слайдера к конкретному блоку с картинками или прочей информацией. И в зависимости от того, какие команды прописаны в этом скрипте, существуют разнообразные виды слайдеров Slick с разными функциональными возможностями. Ниже будет представлен перечень этих команд с описанием каждой. Это будет для Вас неплохой шпаргалкой, если Вы еще плохо знакомы с этим слайдером.
В завершение хочется отметить, что Slick является наиболее универсальным и простым в использовании слайдером на сегодняшний день. Широкий интервал настроек слайдера охватывает великое множество решений реализации слайдеров, что является, наверно, самым весомым преимуществом этого слайдера.