Привлекательный дизайн главной страницы сайта часто составляет первое впечатление о портале и его владельцах. Чем современнее и элегантнее смотрится веб-сайт, тем больше шансов превратить потенциальных клиентов в постоянных. Одним из решений, которое позволяет добиться успеха в оформлении главной страницы, выступает такой инструмент как слайдер Owl Carousel 2.

Что такое слайдер Owl Carousel 2 и для чего предназначен

Слайдер Owl Carousel 2 – это инструмент для организации и показа изображений в виде карусели. Плагин содержит в себе много полезных функций, главными из которых выделяют следующие:

• Свыше 60 опций настройки визуализации слайдов;
• Адаптивность и кроссбраузерность;
• Удобство пролистывания на мобильных устройствах и планшетах.

При этом слайдер возможно добавить на сайт за пару минут, процесс которого разберем далее.

Установка и настройка Owl Carousel 2

Первое что нужно сделать – это скачать плагин с официального сайта https://owlcarousel2.github.io/OwlCarousel2/. 

Установка

Плагин создан на базе jQuery, поэтому для корректной работы инструмента требуется добавить ряд подключений скриптов в шапке (header) сайта. Для этого из скачанного архива загружаем файлы к себе в файловую систему портала с сохранением иерархии папок. Затем открываем файл, отвечающий за шапку сайта (в редких случаях шапка содержится в том же файле, что и «тело» сайта) и в блоке head дописываем следующий код:

<link rel="stylesheet" href="https://my-site.com/owl-carousel/css/owl.carousel.css">
<link rel="stylesheet" href=" https://my-site.com/owl-carousel/css/owl.theme.default.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src=" https://my-site.com/owl-carousel/js/owl.carousel.js"></script>

При этом часть «https://my-site.com/» меняем на свою. Если файлы загружаются в некую подпапку, «plagins» к примеру, тогда путь подключения будет: 

<link rel="stylesheet" href="https://my-site.com/plagins/owl-carousel/css/owl.carousel.css">
<link rel="stylesheet" href=" https://my-site.com/plagins/owl-carousel/css/owl.theme.default.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src=" https://my-site.com/plagins/owl-carousel/js/owl.carousel.js"></script>

Другими словами, требуется указать полный путь к файлам слайдера. Если файл jquery.min.js, который указан в 3 строчке примера, скачан ранее, то для его подключения также требуется указать полный путь как в других строчках примера. При этом убеждаемся, что скачанная версия jquery.min.js совпадает с той, что указана в строке номер 3 этого примера.

Добавление разметки

Итак, файлы подключены и переходим к добавлению разметки для работы слайдера. Она выглядит следующим образом:

<div class="owl-carousel">
 <div>Картинка 1</div>
 <div>Картинка 2</div>
 <div>Картинка 3</div>
 <div>…</div>
 <div>Картинка 10</div>
</div>

На место подписей добавляем код вывода той или иной картинки. В итоге html-код блока будет выглядеть так:

<div class="owl-carousel">
 <div><img alt=”Акции” title=”Акции” src=”https://my-site.com/images/akcii.png”/></div>
 <div><img alt=”Бонусы постоянным клиентам” title=”Бонусы постоянным клиентам” src=”https://my-site.com/images/bonus.png”/></div>
 <div><img alt=”Новинки сезона” title=”Новинки сезона” src=”https://my-site.com/images/novinki-sezona.png”/></div>
</div>

Важно! Атрибуты alt и title добавлять не обязательно, но это рекомендуется для оптимизации сайта под поисковики.

Кроме разметки также требуется добавить и следующий javascript-код для организации работы слайдера (без него будет выводится только набор подключенных картинок):

<script>
$(function() {
 $(".owl-carousel").owlCarousel();
});
</script>

Этот блок кода добавляем в шапке или низу сайта. Внутри блока скрипта $(«.owl-carousel»).owlCarousel() добавляем нужный функционал слайдера, полный список которых возможно увидеть по ссылке https://owlcarousel2.github.io/OwlCarousel2/docs/api-options.html. 

Пример

К примеру, требуется вывести кнопки перелистывания слайдов, 1 картинку на экран и автозапуск цикла показов. Для этого изменяем код javascript к следующему виду:

<script>
$(function() {
$(".owl-carousel").owlCarousel({
nav:true,
autoplay:true,
items:1,
});
});
</script>

Остается добавить только необходимые стили и слайдер готов к работе. Но если нет желания добавлять собственные стили и применить стандартные, то добавляем класс owl-theme в блок разметки чтобы получилось следующее:

<div class="owl-carousel owl-theme">
 <div><img alt=”Акции” title=”Акции” src=”https://my-site.com/images/akcii.png”/></div>
 <div><img alt=”Бонусы постоянным клиентам” title=”Бонусы постоянным клиентам” src=”https://my-site.com/images/bonus.png”/></div>
 <div><img alt=”Новинки сезона” title=”Новинки сезона” src=”https://my-site.com/images/novinki-sezona.png”/></div>
</div>

Удачного использования!