Привет друзья. Сегодня поговорим об адаптивных jQuery слайдерах, которые помогут украсить ваш landing page, грамотно структурировать информацию и лаконично подать ее.
Когда-то я проводил опрос в социальных сетях и просил предложить какой-нибудь стоящий скрипт слайдера, которым вы пользуетесь сами. Особого успеха пост не набрал, но мне посоветовали отличный инструмент, который сегодня и будет на первом месте. За что — большое спасибо. Может быть, после этой статьи кто-то посоветует еще более качественный скрипт.
ТОП скриптов, реализующих слайдер на сайтеТак как все представленные ниже скрипты являются jQuery плагинами, то они легко встраиваются как на обычные html сайты, так и на любые CMS и многие .
Owl Carousel 2На мой взгляд Owl Carousel 2 — лучший jQuery слайдер из бесплатных. Масса настроек, наличие API и возможность полной кастомизации. Все это влюбило в себя с первого взгляда. Отлично реагирует на смартфонах и планшетах, поддерживает перелистывание Swip(ом) и многое другое.
Slick slider
На второе место, сейчас, я бы поставил Slick slider . Достаточно интересный вариант, которым я пользовался некоторое время. Для задач landing page меня вполне устраивал. Оформить комментарии, логотипы брендов и партнеров, со всем этим этот слайдер справлялся на ура. Есть возможность пользоваться методами и событиями, а также выводить слайдер в нескольких местах на странице.
Sudo slider
Помимо прочего, слайдер поддерживает перелистывание путем перетаскивания элементов на сенсорном дисплее, что несомненно порадует посетителей вашего сайта, использующих смартфон или планшет.
Итак, слайдер имеет название 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 } } ] }); });
С более подробными настройками можно ознакомиться на
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;}
Скрипт слайдера мы скачали в прошлом уроке командой
$ bower i slick.js
Также его можно найти в Google - первая ссылка по запросу slick http://kenwheeler.github.io/slick/
Преимущества слайдера: - поддерживает touch events - можно просматривать с телефона, листая пальцем- поддерживает responsive - можно задать разное количество слайдов в зависимости от размера экрана: на больших экранах просматривать по 4 слайда, на средних по 2-3, на телефонах по одному
Хорошая практика - подключение скриптов из папки bower_components
Тогда при обновлении скрипта программой bower не придётся переписывать номер версии в коде, так как bower даёт скриптам постоянные имена, которые при обновлении не меняются.
Что касается стилей, которые находятся в папке slick: slick.css, slick.less, slick.theme.less их лучше скопировать в папку с css и подключить оттуда. Если оставить их на месте, и в стили слайдера вносить изменения, то при обновлении скрипта все эти изменения будут утеряны.
В отличии от других слайдеров, кадры размещаются не в списке, а в блоках:
1 2 3 4 5 6
Вызов без параметров При вызвове плагина без параметров получаем простой вариант с одним слайдом на странице и навигационные стрелки.$ (".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 перед открывающим подключаем стили слайдера:
Перед закрывающим подключаем скрипты
Ещё этот слайдер требует шрифты. Папку 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);
}
Display multiple slick image slider and carousel using shortcode with category. Fully responsive, Swipe enabled, Desktop mouse dragging and Infinite looping. Fully accessible with arrow key navigation Autoplay, dots, arrows etc.
It uses A custom post type and taxonomy to create a slider, with almost unlimited options and support for multiple sliders on any page. You can also display image slider on your website header.
We have added 5 designs for slider and 1 design for carousel. You can find all designs on our demo website. Just copy the shortcode of design that you like and use.
Журнал изменений 1.8 (08, August 2019)- [*] Update demo links
- [*] Fixed some small-small issues.
- [*] Updated text under featred image ie Add slider image.
- [+] Added new shortcode parameter ie image_fit=»true». image_fit parameter is used to specify how an image should be resized to fit its container. By default value is «true». Options are «true OR false». NOTE: NOTE: image_fit=»true» work better if sliderheight is given. if image_fit=»false», no need to use sliderheight parameter.
- [*] image_fit parameter work with both the shortcode.
- [+] Added new shortcode parameter ie image_size=»full» for shortcode (Default is «full», values are thumbnail, medium, medium_large, large, full)
- [-] Removed default height 400 from sliderheight parameter.
- [-] Remove object-fit CSS property from img under CSS if image_fit=»false».
- [*] Minor change in Opt-in flow.
- [*] Update Opt-in flow.
- [*] Tested with WordPress 5.0 and Gutenberg.
- [*] Fixed slider height issues with some designs.
- [*] Taken better security with esc_url and esc_html .
- [*] Fixed some CSS issues.
- [*] Follow some WordPress Detailed Plugin Guidelines.
- [*] Fixed some css issues related to slider arrow.
- [*] Fixed some css issues
- [*] Updated slick.min.js to the latest version
- [*] Fixed all responsive issues and checked many mobile devices.
- [*] If you are using any cache plugin, please clear your cacheing after plugin updates
- [*] Fixed design-6 issue with shortcode parameter variablewidth=»true» in responsive layout
- [*] If you are using any cache plugin, please clear your cacheing after plugin updates
- [*] Fixed design-6 issue with shortcode parameter variablewidth=»true»
- [*] If you are using any cache plugin, please clear your cacheing after plugin updates
- [*] Fix responsive issue reported by users in v-1.3.1
- [*] If you are using any cache plugin, please clear your cacheing after plugin updates
- [*] Fix main JS wp_register_script issue
- [+] Added sliderheight parameter in shortcode
- [*] RTL made better to work with RTL websites
- [*] Center mode and variablewidth improved better as per usres feedback
- [*] sliderheight parameter improved
- [+] RTL Supported
- [+] Added overlay for design-2
- [+] Added «How it work tab»
- [-] Removed Pro design tab
- Updated all the designs and fix the bug
- Fixed image display issue on mobile
- Replaced arrow images
- Updated slider js to latest version.
- Updated plugin design page.
- Fixed some css issues.
- Fixed some css issues.
- Resolved multiple slider jquery conflict issue.
- Fixed some bug
- Added Pro version with 16 designs
