bltzrrr bltzrrr - 3 months ago 46
HTML Question

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?

Answer

You need to enable navigation and edit navigationText:

Assuming this is version 1.3.2

http://owlgraphic.com/owlcarousel/#customizing

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

Assuming it's version 2:

http://www.owlcarousel.owlgraphic.com/docs/api-options.html

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

Personal suggestion: Use Slick over Owl