How to make a owl carousel with arrows instead of next previous

Question

Yesterday I presented a website to a customer. I always use Owl carousel since it's responsive. The client, however, hated the previous, next words, and wanted to change them to arrows.

So hence I updated my script. js file. It was very easy to do and I wanted to share it.

$(document).ready(function(){
$('.owl-carousel').owlCarousel({
    nav:true,
    responsive:{
     ...
 })
 $( ".owl-prev").html('<i class="fa fa-chevron-left"></i>');
 $( ".owl-next").html('<i class="fa fa-chevron-right"></i>');
}); 

Well there you have it. You can always add more styling. (First time I use an answer to your own question hope this is the right place/way)

Answer 1

If you're using Owl Carousel 2, then you should use the following:

$(".category-wrapper").owlCarousel({
     items : 4,
     loop  : true,
     margin : 30,
     nav    : true,
     smartSpeed :900,
     navText : ["<i class='fa fa-chevron-left'></i>","<i class='fa fa-chevron-right'></i>"]
   });