Owl Carousel, making custom navigation

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="https://stackoverflow.com/questions/31224192/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="https://stackoverflow.com/questions/31224192/myprevimage.png">","<img src="mynextimage.png">"]
});

Personal suggestion: Use Slick over Owl

Personal suggestion update: Tiny slider is great too.

Leave a Comment