Як зробити карусель або слайдер за допомогою Owl carousel

Для того щоб зробити слайдер або карусель 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');