Owl Carousel 2 примеры

Owl Carousel 2, полезные примеры

Слайдер со стрелками по бокам картинки с помощью Owl Carousel 2

В стандартном плагине кнопки «предыдущий» и «следующий» находятся внизу слайдера и обозначаются просто текстом, заменим текст на стрелки.

var slider = $(".owl-slider");
  slider.owlCarousel({
    items:1, // один слайд
    loop: true, // закольцевать
    nav: true, // навигация
    // Перепишем текст кнопок
    // используем Font Awesome для добавления стрелок
    navText: ['<i class="fa fa-angle-left fa-2x" aria-hidden="true"></i>',
              '<i class="fa fa-angle-right fa-2x" aria-hidden="true"></i>'],
    autoplay:true, // автопрокрутка
    autoplayTimeout:3000, // задержка в мс
    autoplayHoverPause:false, // не останавливать при наведении
  });

CSS:

.owl-prev i, .owl-next i {
    color: white;
}
.owl-prev, .owl-next {
    position: absolute;
    top: 50%;
    margin-top: -10px;
}
.owl-prev {
    left: 5px;
}
.owl-next {
    right: 5px;
}
Обработка клика Owl Carousel 2

К сожалению в замечательном плагине Owl Carousel 2 не предусмотрена обработка кликов (click event) на изображение нашей карусели. Для добавления с использованием jQuery подойдет этот код:

var carousel= $(".owl-carousel");
  carousel.owlCarousel({
    responsive:{ // уменьшаем кол-во слайдов
      0:{ // ширина от 0 px
        items:1
        },
      600:{ // от 600 px
        items:3
        },
      1000:{ // от 1000 px
        items:5
        }
    }
    loop: true, // закольцевать
    nav: true, // кнопки вперед/назад
    autoplay:true, // автопрокрутка
    autoplayTimeout:3000, // задержка в мс
    autoplayHoverPause:false, // не останавливать при наведении
  });
 
carousel.on('click', '.owl-item', function () {
    //получить индекс
    var click = $(this).index();
    //по клику листаем к слайду на который кликнули
    carousel.trigger( 'to.owl.carousel', [click] )
    // Или добавляем свою функцию вместо листания
});
Опубликовано Рубрики ПрограммированиеМетки JavaScript, jQuery

Добавить комментарий