0

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

 });
Mr Lister
  • 45,515
  • 15
  • 108
  • 150
Nick
  • 31
  • 5
  • Your image path could be the issue, what does your file structure look like? Also, an image html element is self-closing, you do not need the closing "" tags. – Maverick976 Feb 04 '16 at 20:53
  • This sits inside of my js folder and also there is a minified version of this file inside of the js folder in a min folder. The images are in an img folder. – Nick Feb 04 '16 at 20:59
  • Thank you! The "" was the issue. It works perfect now. – Nick Feb 04 '16 at 21:01

0 Answers0