Owl Carousel: настройка и подключение

Многие люди на собственном сайте хотят видеть слайдеры – это такие блоки, которые отображают один элемент контента на экране, а по прошествии определенного отрезка времени сменяют этот контент на другой. Естественно, каждый веб-разработчик способен самостоятельно создать слайдер с помощью HTML, CSS и JavaScript, однако далеко не всегда в этом есть смысл. Вы потратите довольно много времени, притом что в Интернете имеется довольно много уже готовых решений, значительно облегчающих вашу жизнь и делающих ваш сайт значительно более привлекательным. В данной статье речь пойдет об одном из таких решений под названием Owl Carousel. Настройка этого слайдера является невероятно простой, поэтому с ней справится даже начинающий. Сейчас вы узнаете, что представляет собой этот слайдер, а также другие важные детали. Настройка Owl Carousel производится пошагово, так что вам стоит изучать этот материал исключительно по порядку.

Что это такое и почему стоит выбрать именно этот слайдер?

Owl Carousel, настройка которого будет рассматриваться в данной статье, является очень эффективным плагином, который добавляет на вашу страницу красивый и удобный слайдер, что значительно облегчит вам работу над сайтом, позволив сэкономить немало времени, усилий и средств. В чем же преимущества именно этого плагина, ведь слайдеров в Сети имеется довольно много? Дело в том, что этот слайдер предлагает вам несколько десятков опций настройки, что позволит вам сделать вашу страницу уникальной и неповторимой. Это адаптивный плагин, который будет работать на всех версиях браузеров, а также его можно легко подключить WordPress и другим популярным CMS. В общем, преимуществ у этого слайдера имеется очень много, поэтому вам стоит определенно сделать выбор в его пользу. Однако, прежде чем начать настройку Owl Carousel, этот плагин еще нужно загрузить.

Скачивание

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

CSS

В Owl Carousel 1.3 настройки остаются практически такими же, как и в более новой второй версии, добавляются только новые функции. Однако базовая информация будет такой же, начиная с добавления CSS в ваш документ. Итак, первый шаг – это добавить в HTML-код строку <link rel="stylesheet" href="owlcarousel/owl.carousel.min.css">. Что она вам дает? Это строка, которая загружает на сайт необходимые стили для отображения слайдера. На этом вы можете закончить, занявшись визуальной обработкой самостоятельно. Однако есть и более удобное и быстрое решение. Вы также можете добавить строку <link rel="stylesheet" href="owlcarousel/owl.theme.default.min.css">, которая загружает также стандартную тему слайдера, что делает его моментально готовым к использованию. Можете отредактировать некоторые стили, сделав ваш слайдер более уникальным и необычным, а также более подходящим для вашего контента. Естественно, настройки Owl Carousel на русском были бы очень удобными, однако каждый человек, который создает сайты, должен понимать, что без знания английского ему не обойтись.

Подключение JavaSpript

Естественно, слайдер не будет работать без JS, поэтому вам необходимо также позаботиться о том, чтобы подключить соответствующий файл, содержащий необходимый код. Для этого вам нужно вставить строку кода из документации, однако при обязательном соблюдении одного условия. Все знают, что JS – это язык программирования, который выполняет все команды по порядку, соответственно, в данном случае вам стоит добавлять эту строчку кода после той строки, которая добавляет в ваш документ библиотеку jQuery. Больше с JS в случае с этим слайдером вам ничего делать не нужно.

Оформление HTML-кода

Что ж, вы подключили слайдер, теперь пришло время его оформить и настроить. В первую очередь вам необходимо написать HTML-код, чтобы слайдер вообще появился на вашей странице. Для этого вам нужно создать контейнер, в котором будут содержаться слайды. Сделать это можно с использованием тега div, которому нужно приписать класс owl-carousel. Именно этот класс обеспечивает то, что все стили, которые относятся к слайдеру, будут активированы. Также вы можете прописать еще один класс - owl-theme. Он пригодится вам в том случае, если вы решили использовать дизайн по умолчанию или же взяли стандартную версию слайдера в качестве основы для дальнейшей работы.

Затем вам нужно добавлять каждый слайд в отдельном контейнере с тегом div. Естественно, вы можете использовать и другие теги, однако лучше всего в случае со слайдерами подходит именно этот тег.

Вызов плагина

Ну и последнее, что вам нужно сделать, чтобы на вашем сайте появился уже готовый слайдер, – это использовать данный блок кода:

$(document).ready(function(){

$(".owl-carousel").owlCarousel();

});

Он гарантирует, что слайдер начнет функционировать, то есть прокручивать контент, когда загрузится ваша страница. С помощью этого же кода вы можете подключить Owl Carousel к WordPress. Настройки этого плагина являются многочисленными и разнообразными, и сейчас вы узнаете о самых ключевых моментах.

Настройка вида и функциональности слайдера

Итак, какие же команды вы можете использовать, чтобы настроить ваш слайдер? В первую очередь вам нужно запомнить команду items, так как с ее помощью вы можете задавать конкретное количество слайдов в вашем слайдере. Команда loop позволит вам выбрать, зацикливать ли слайдер, или остановить прокрутку на последнем элементе. Есть также команда Drag, которая имеет несколько вариантов, например, mouse и touch. В первом случае вы можете сделать так, чтобы элементы вашего слайдера можно было перелистывать зажатой мышкой, а во втором случае – с помощью касания (эта команда подходит для мобильных устройств). Еще одна важная команда – это nav, которая включает отображение стрелок навигации. Вместе с ней вы можете использовать команду navText, добавляя подписи к кнопкам навигации. Также вам не стоит забывать о команде autoplay, которая позволяет вам включать и выключать автоматический старт перелистывания слайдов вашего слайдера при загрузке страницы. Вместе с этой командой можно также использовать autoplayTimeout, для которой вы можете задать конкретное значение в миллисекундах, которое определит время между автоматическим перелистыванием каждого из слайдов.

Если вы используете адаптивный веб-дизайн, то есть дизайн вашей страницы автоматически меняется в зависимости от того, на каком устройстве он просматривается, то вам обязательно нужно помнить о команде responsive, которая позволяет вам задать количество отображаемых слайдов в зависимости от ширины экрана, на котором просматривается страница.