Как создать отдельные стрелки для Owl-carousel?

Question

В Owl-carousel встроены кнопки навигации. Однако мне нужно, чтобы они находились не в контейнере с каруселью. Решил приделать свой собственный код для этого. Однако он не работает с каруселью. Как заставить его работать?

var instance = $(".hs__wrapper");
$.each( instance, function(key, value) {
    
    var arrows = $(instance[key]).find(".arrow-bottom"),
        prevArrow = arrows.filter('.arrow-prev'),
        nextArrow = arrows.filter('.arrow-next'),
        box = $(instance[key]).find('.owl-stage'), 
        x = 0,
        mx = 0,
        maxScrollWidth = box[0].scrollWidth - (box[0].clientWidth / 2) - (box.width() / 2);

    $(arrows).on('click', function() {
      
        if ($(this).hasClass("arrow-next")) {
            x = ((box.width() / 2)) + box.scrollLeft() - 10;
            box.animate({
            scrollLeft: x,
        })
        } else {
        x = ((box.width() / 2)) - box.scrollLeft() -10;
        box.animate({
            scrollLeft: -x,
        })
     }
  
    });

Answer 1

Проще добавить куда нужно новые две кнопки, и кликнув на них имитировать клик на карусельные кнопки, примерно так:

$('#one').on('click', () => {
  console.log('one clicked');
});

$('#two').on('click', () => {
  $('#one').trigger('click');
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<button id="one">
one
</button>

<button id="two">
two
</button>

БЛОГ НА HUSL

Как создать отдельные стрелки для Owl-carousel?

Ответы (1 шт):