I am trying to figure out how to insert custom images as the Previous and Next buttons in owl-carousel. Below is what I have tried so far.
The <i> classes that are commented out work perfectly fine however the <img> tags underneath are not working for some reason. The browser shows the alt tags but is having trouble finding the actual image to display -- am I showing the right path to find the images?
// init Owl
$("#owl-example").owlCarousel({
navigation : true, // Show next and prev buttons
navigationText: [
//"<i class='icon-chevron-left icon-white'><</i>",
//"<i class='icon-chevron-right icon-white'>></i>"
"<img src='../../img/hero.jpg' alt='left'></img>",
'<img src="../../img/rightarrow.svg" alt="right"></img>'
],
slideSpeed : 300,
paginationSpeed : 400,
singleItem:true,
pagination:false
// "singleItem:true" is a shortcut for:
// items : 1,
// itemsDesktop : false,
// itemsDesktopSmall : false,
// itemsTablet: false,
// itemsMobile : false
});