Слайдер Owl Carousel 2 — как подключить, настройки, пример для WordPress

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

Всю информацию по слайдеру вы можете найти на этой странице. Насколько я понимаю, Owl Carousel 2 — это вторая версия скрипта, более мощная и функциональная (с первой не совместима). Работает со всеми современными браузерами: Firefox, Chrome, IE7/8/10/11, Opera, Safari (iPad, iPod4), Galaxy S4, Nexus 7 Chrome, Nokia 8s Windows8 и т.п.

Основные преимущества:

• Более 60-ти опций настройки, в которых разберется даже новичок. Основные из них: бесконечная прокрутка, центрирование, отступы, разная ширина элементов, вставка видео и т.п.
• Перетаскивание картинок мышкой (как для мобильных устройств, так и для десктопов).
• Практически все опции скрипта включают адаптивность.
• Owl Carousel 2 использует технологию переходов CSS3 Translate3d. Работает быстро и красиво.
• Для старых браузеров поддерживается CSS2.
• Модульная структура — отключайте ненужные плагины, добавляйте другие решения.

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

Подключение Owl Carousel 2

Рассмотрим детальнее как подключить Owl Carousel 2 на обычный сайт. Первым делом вам нужно зайти на официальный сайт скрипта и нажать по кнопке Download в правом верхнем углу страницы. Как вы уже поняли, скачать Owl Carousel 2 можно абсолютно бесплатно. Затем распаковываете архив и загружаете его файлы на ФТП сайта в предварительно созданную директорию owlcarousel.

Для интеграции скрипта нужно выполнить несколько шагов:

1) Добавление CSS в область HEAD вашего шаблона

<link rel="stylesheet" href="owlcarousel/owl.carousel.min.css">
<link rel="stylesheet" href="owlcarousel/owl.theme.default.min.css">

Первый файл здесь является обязательным и должен быть подключен до *.js скриптов. Вторая строка задает оформление вашего слайдера в том числе и элементы управления (кнопки). Можете отредактировать owl.theme.default.min.css под стилистику своего проекта или вообще убрать.

2) Подключение JS

<script src="jquery.min.js"></script>
<script src="owlcarousel/owl.carousel.min.js"></script>

Скрипт  owl.carousel.min.js желательно добавлять в футере вашей темы. Что касается jquery.min.js, то он, как правило, уже включен в разные шаблоны. Если же его там нет, добавьте.

3) Добавление HTML кода

Какой-то особой разметки для настройки Owl Carousel 2 не нужно. Требуется лишь поместить элементы слайдера внутрь контейнера <div class=»owl-carousel»>. В принципе, кроме DIV могут использоваться и другие конструкции (span, a, img), но класс owl-carousel при этом обязателен (считывает оформление с owl.carousel.css).

<!-- Set up your HTML -->
<div class="owl-carousel">
  <div> Slide1 Content </div>
  <div> Slide2 Content </div>
  <div> Slide3 Content </div>
</div>

Если хотите добавить стили по умолчанию для блока навигации (точек, стрелочек), допишите во внешнем контейнере класс owl-theme.

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

Для активации скрипта Owl Carousel 2 используется следующая функция (размещается в HEAD после строк подключения CSS и JS файлов).

$(document).ready(function(){
  $(".owl-carousel").owlCarousel();
});

Это все, что касается теории. Реальные варианты кода можете посмотреть на сайте слайдера или в следующих разделах данной статьи.

Настройки и примеры Owl Carousel 2

Выбираете из верхнего меню раздел Demos, где находятся примеры использования Owl Carousel 2. Они демонстрируют базовые фишки скрипта, а также работу со встроенными плагинами и сторонними библиотеками. Посмотрим на самый первый вариант из «Basic demos».

Для HTML тут используется следующий код:

<div class="owl-carousel owl-theme">
    <div class="item"><h4>1</h4></div>
    <div class="item"><h4>2</h4></div>
    <div class="item"><h4>3</h4></div>
    <div class="item"><h4>4</h4></div>
    <div class="item"><h4>5</h4></div>
    <div class="item"><h4>6</h4></div>
    <div class="item"><h4>7</h4></div>
    <div class="item"><h4>8</h4></div>
    <div class="item"><h4>9</h4></div>
    <div class="item"><h4>10</h4></div>
    <div class="item"><h4>11</h4></div>
    <div class="item"><h4>12</h4></div>
</div>

В контейнере видите классы owl-carousel owl-theme, о которых мы говорили выше. В качестве элементов может использоваться не только DIV (попробуйте img, span, a). Для настройки Owl Carousel 2 и вызова функции такой код:

$('.owl-carousel').owlCarousel({
    loop:true,
    margin:10,
    nav:true,
    responsive:{
        0:{
            items:1
        },
        600:{
            items:3
        },
        1000:{
            items:5
        }
    }
})

Здесь видите такие опции как: отступ margin, вывод навигации nav:true и loop:true, отвечающую за бесконечную прокрутку Owl Carousel 2. Также задается количество объектов для разных разрешений экрана, улучшая адаптивность слайдера.

Все настройки можете найти опять же на официальном сайте в разделе Dosc. В меню слева будет блок API и подпункты Options, Classes, Events (опции, классы, события) с детальным их описанием. Чуть ниже — информация по плагинам, внешним библиотекам, Sass стилям и т.п.

Но вернемся к настройкам Owl Carousel 2. Вот пример из создаваемого мною сайта:

<script>
	jQuery(function($){
	    $(document).ready(function(){
	        var owl = $(".owl-carousel").owlCarousel({
	            items: 1,
	            slideSpeed: 500,
	            autoplay: true,
	            autoplayTimeout: 4500,
	            loop: true,
	            mouseDrag: false,
	            singleItem: true,
	            dots: true,
	            margin: 85,
	            itemElement:'li',
	            stageElement:'ul',
	            dotsClass:'slider__pager',
	        }).data('owlCarousel');
 
	    });
	})
</script>

Здесь есть:

• items — число отображаемых элементов на экране;
• autoplay — автоматическая прокрутка слайдов;
• autoplayTimeout — скорость смены картинок;
• loop — бесконечный цикл;
• mouseDrag — отключение перетаскивания мышкой;
• dots — точки в качестве навигации;
• margin — отступы;
• itemElement — DOM элемент для объектов (слайдов);
• stageElement — DOM элемент контейнера для элементов слайдера;
• dotsClass — класс блока навигации.

Больше информации ищите в разделе Dosc. Как я сказал выше, там есть все описания опций с их возможными значениями. Реально разобраться не сложно.

Owl Carousel 2 для WordPress

В принципе для wordpress есть несколько интересных плагинов каруселей (слайдеров) но в моем конкретном случае они не подошли. Также нашел модуль для первой версии скрипта, но он не обновлялся два года и является морально устаревшим. Поэтому пришлось реализовывать интеграцию Owl Carousel 2 с WordPress самостоятельно. Расскажу вкратце про алгоритм решения этой задачи.

Самое простое здесь — базовое подключение Owl Carousel 2 и настройка его опций. Внедрить CSS, JS и организовать вызов функции можно разместив соответствующий код в файлы шаблона header.php и footer.php. Но как быть с HTML разметкой для элементов слайдера (картинка + заголовок)? Пользователь ведь должен иметь возможность менять их через админку.

Есть несколько вариантов решения, но я бы советовал обратить внимание на модуль Custom Field Suite. Данный плагин позволяет создавать пользовательские поля разных типов: тексты, даты, загрузчики файлов, циклы и т.п. Я не буду детально останавливаться на его функциях (они описаны в обзоре Custom Field Suite) покажу лишь формат созданного мною пользовательского элемента.

На картине выше найдете элемент mainslider типа «Loop» — цикл, позволяющий создавать несколько разных блоков одного и того же формата. Для него определены 2 составляющих: mainslider_image (загрузка файла, возвращает URL) и mainslider_title (текстовая область). Таким образом пользователь сможет создать несколько слайдов, состоящих из картинки и заголовка.

Чтобы интегрировать эти данные в сам сайт, открываете файл шаблона, где должен размещаться слайдер (например, index.php), и пишите код на подобии следующего:

<?php $slider_fields = CFS()->get( 'mainslider' );
if( ! empty($slider_fields) ): ?>
	<div class="slider owl-carousel">
	<?php foreach ( $slider_fields as $site_slider ) { ?>
		<div class="slide">
			<div class="slide__image"><img src="<?php echo $site_slider['mainslider_image']; ?>" width="879" height="468" /></div>
			<div class="slide__text"><?php echo __( $site_slider['mainslider_title'],'ortomet'); ?></div>
		</div><!-- .slider -->
	<?php } ?> 
	</div>
<?php endif; ?>

Общую структуру для слайдера я брал из своего сверстанного файла шаблона, поэтому классы slide__image, slide__text, точно также как и размеры картинки не являются обязательными (у вас, наверняка будут другие). В этом коде нужно понимать несколько вещей:

• В первой строке считываются данные из элемента mainslider (созданного в админке вордпрес) и записываются в переменную $slider_fields.
• Дальше через foreach обходятся все элементы массива $slider_fields и для каждого создается отдельный слайд из картинки и заголовка.
• Внешний контейнер DIV имеет класс owl-carousel как и требуется для Owl Carousel 2.

Кстати, в сети видел реализацию подключения Owl Carousel 2 через модуль Advanced Custom Fields, но там пользовательские типы полей Loop и Галерея в бесплатной версии не распространяются (только PRO). Теоретически, можно реализовать задачу и через создание своего виджета, но мне кажется Custom Field Suite наиболее подходящий плагин в данном случае.

Итого для интеграции Owl Carousel 2 нужно:

1. Скачать скрпит с официального сайта.
2. Подключить CSS и JS файлы.
3. Разместить код вызова функции с нужными настройками.
4. Сгенерировать соответствующий HTML код на странице сайта.

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