imitronov

imitronov

Кто я?

Веб разработчик. Работаю с WordPress, 1C-Bitrix, modX, OctoberCMS. Делаю обзоры онлайн сервисов и малоизвестных CMS.


О чем я пишу


Свежие записи

Эффективное использование плагина Owl Carousel

Эффективное использование плагина Owl Carousel без использования css классов. Запуск привязывается к data атрибутам, а настройки для каждой карусели хранятся в js массиве.

Эффективное использование плагина Owl Carousel без использования css классов. Запуск привязывается к data атрибутам, а настройки для каждой карусели хранятся в js массиве.

Подключаем плагин Owl Carousel и настраиваем его:

Разметка:

<div class="owl-carousel" data-owl="first">
  <img src="http://placehold.it/400x400/ff3366/ffffff">
  <img src="http://placehold.it/400x400/ff6633/000000">
  <img src="http://placehold.it/400x400/33ff66/ffffff">
  <img src="http://placehold.it/400x400/3366ff/ffffff">
  <img src="http://placehold.it/400x400/ff3366/ffffff">
  <img src="http://placehold.it/400x400/ff6633/000000">
  <img src="http://placehold.it/400x400/33ff66/ffffff">
  <img src="http://placehold.it/400x400/3366ff/ffffff">
</div>

<hr>

<div class="owl-carousel" data-owl="second">
  <img src="http://placehold.it/400x400/ff3366/ffffff">
  <img src="http://placehold.it/400x400/ff6633/000000">
  <img src="http://placehold.it/400x400/33ff66/ffffff">
  <img src="http://placehold.it/400x400/3366ff/ffffff">
  <img src="http://placehold.it/400x400/ff3366/ffffff">
  <img src="http://placehold.it/400x400/ff6633/000000">
  <img src="http://placehold.it/400x400/33ff66/ffffff">
  <img src="http://placehold.it/400x400/3366ff/ffffff">
</div>

<button type="button" id="owl-second-prev">Назад</button>
<button type="button" id="owl-second-next">Вперед</button>

Код JavaScript

$(document).ready(function(){
    var carouselEls  = $('[data-owl]');
    var carouselConf = [];

    carouselConf['first'] = {
        items: 3,
        margin: 10,
        loop: false,
        nav: true,
        dots: true
    };

    carouselConf['second'] = {
        items: 1,
        dots: true,
        nav: false,
        loop: true,
        margin: 0,
        autoplay: true,
        animateIn: "fadeIn",
        animateOut: "fadeOut",
        mouseDrag: false,
        navText: ['<i class="icon-prev"></i>', '<i class="icon-next"></i>'],
    };

    $.each(carouselEls, function(i){
        var id = $(this).data('owl');
        var owl = $(this).owlCarousel(carouselConf[id]);

        if(id == 'second') {
            $("#owl-second-prev").click(function () {
                owl.trigger('prev.owl.carousel');
            });

            $("#owl-second-next").click(function () {
                owl.trigger('next.owl.carousel');
            });
        }
    });

});