Owl Carousel, making custom navigation

So i have an Owl Carousel that contains three images. I also added custom navigation arrows (.png images) on left and right sides. However, those arrows are currently useless, because I can't find a way to actually make them switch between images of my Owl Carousel. I searched endlessly and can't find the solution. Any ideas?

Solution 1:

You need to enable navigation and edit navigationText:

> Assuming this is version 1.3.2

owlgraphic.com/owlcarousel/#customizing

Note: It appears the site for Owl 1.3 is now down, so here is a forked Codepen example.

$("#owl-example").owlCarousel({
  navigation: true,
  navigationText: ["<img src='myprevimage.png'>","<img src='mynextimage.png'>"]
});

> Assuming it's version 2:

https://owlcarousel2.github.io/OwlCarousel2/docs/api-options.html#nav

$("#owl-example").owlCarousel({
  nav: true,
  navText: ["<img src='myprevimage.png'>","<img src='mynextimage.png'>"]
});

Personal suggestion: Use Slick over Owl

Personal suggestion update: Tiny slider is great too.

Solution 2:

If you want to use your own custom navigation elements,

For Owl Carousel 1

var owl = $('.owl-carousel');
owl.owlCarousel();
// Go to the next item
$('.customNextBtn').click(function() {
    owl.trigger('owl.prev');
})
// Go to the previous item
$('.customPrevBtn').click(function() {
    owl.trigger('owl.next');
})

For Owl Carousel 2

var owl = $('.owl-carousel');
owl.owlCarousel();
// Go to the next item
$('.customNextBtn').click(function() {
    owl.trigger('next.owl.carousel');
})
// Go to the previous item
$('.customPrevBtn').click(function() {
    // With optional speed parameter
    // Parameters has to be in square bracket '[]'
    owl.trigger('prev.owl.carousel', [300]);
})