Для того щоб зробити слайдер або карусель Owl carousel потрібно виконати наступні кроки:
Завантаження файлів Owl carousel
Завантажити необхідні файли на сервер. Для зручності можна створити папку, наприклад carousel, та завантажити файли в неї.
Підключити файли стилів та скрипів
wp_enqueue_style( 'owl-carousel', get_template_directory_uri() . '/carousel/owl.carousel.min.css' ); wp_enqueue_style( 'owl-theme-default', get_template_directory_uri() . '/carousel/owl.theme.default.min.css' ); wp_enqueue_script( 'owl-carousel-script', get_template_directory_uri() . '/carousel/owl.carousel.min.js' );
Вивести розмітку у необхідному місці шаблону
Розмітка повинна бути така:
<div class="owl-carousel owl-theme posts-carousel"> <div class="item"></div> <div class="item"></div> <div class="item"></div> </div>
«Увімкнути» скрипт для роботи каруселі чи слайдера.
Це можна зробити у підключеному файлі *.js або безпосередньо після розмітки.
// Owl-carousel $('.owl-carousel').owlCarousel({ loop:true, autoplay:true, autoplayTimeout:3000, smartSpeed: 1000, margin:10, nav:true, dots: false, responsive:{ 0:{ items:1 }, 600:{ items:2 }, 1000:{ items:3 } } }); // ! Owl-carousel
Примітка
Якщо карусель використовується для записів, то з розмітки можна прибрати
<div class="item"></div>
А у файл js додати код (щось наприклад цього):
$('.section-blog .post').addClass('item');