Как в Owl Carosel сделать свои кнопки вправо-влево?

Question

[Ilya1791]

Добрый день!

Сделал слайдер при помощи плагина Owl Carousel, к нему сделал свой блок навигации.

<div class="nav-block">                       
                            <div id="prev" class="prev">
                            </div>
                            <div id="next" class="next">
                            </div>                       
                </div>    

<div id="owl-example" class="owl-carousel">
    <div> Контент 1 </div>
    <div> Контент 2 </div>
    <div> Контент 3 </div>
    <div> Контент 4 </div>
    <div> Контент 5</div>
    <div> Контент 6 </div>
    <div> Контент 7 </div>
</div>

Подключил плагин, вызвад код

var owl = $("#owl-example");
 owl.owlCarousel({
       items : 4
  });

Не понял, как подключать навигацию к своим кнопкам, стал искать в Интернете, нашел только такой пример:

$("#prev").click(function(){
        owl.trigger("owl.prev");
    });
    
    $("#next").click(function(){
        owl.trigger("owl.next");
    });

но навигация не работает, слайдер сам работает, мышкой, например, перетаскивается.
Подскажите, пожалуйста, как правильно прикрутить свою навигацию к слайдеру.

Answer 1

[Максим]

стилизовать их

Answer 2

[Ilya1791]

А как стилизация поможет? Дело-то в скриптах.

Answer 3

[Рюрик Ростиславич]

Элементарно , в js-ах owl есть такие классы, у меня например это
owl-prev и owl-next

Просто присваиваю то что хочу и профит.

Answer 4

[Ankhena]

Интересно, если открыть документацию к карусели, то там написаны параметры с которыми можно вызывать карусель, в частности:

nav: true, // Show next and prev buttons
navText: ["⟨", "⟩"]  //text

Во втором параметре стрелочки можно убрать и стилизовать кнопочки только через CSS.