Owl Carousel 2 - Get src of the current slide

Question

I have the following code blocks. All I'm trying to do is get the src of the current image in a slide show. It does not work, nothing appears in the console, despite the fact that it changes the slide perfectly.

HTML:

<div id="banner" class="owl-carousel"> <img src="template/banner-1.jpg" alt=""> <img src="template/banner-2.jpg" alt=""> <img src="template/banner-1.jpg" alt=""> <img src="template/banner-2.jpg" alt=""> </div> 

JQuery

 var owl = $(".owl-carousel"); owl.owlCarousel({ loop: true, autoplay: true, items: 1, animateOut: 'fadeOut', onChange: function (elem) { var current = this.currentItem; var src = elem.find(".owl-item").eq(current).find("img").attr('src'); console.log('Image current is ' + src); } }); 

Answer 1

The reason your code doesn't work is because there is no onChange callback for Owl Carousel.

See http://owlgraphic.com/owlcarousel/#customizing under the callback heading of the available options.

If you update it to use "afterMove", it will work correctly after moving the slide.

You may also need to use "afterAction", which starts when you start, move, and update, depending on your requirements.

Js

 var owl = $(".owl-carousel"); owl.owlCarousel({ loop: true, autoplay: true, items: 1, animateOut: 'fadeOut', afterMove: function (elem) { var current = this.currentItem; var src = elem.find(".owl-item").eq(current).find("img").attr('src'); console.log('Image current is ' + src); } }); 

Edit

After further reading the link provided in the comments and documentation for owl carousel 2, a working example is given using owl carousel 2. See this jsfiddle

As with the beta, github issues and answers can be quickly outdated. The solution found from the documentation on the Owl Carousel 2 site is here

HTML

 <div id="banner" class="owl-carousel"> <img src="http://www.live-on-the-edge.com/wp-content/uploads/2014/06/Sam-Tomkins-730x547.jpg" alt=""/> <img src="http://static.guim.co.uk/sys-images/Sport/Pix/pictures/2009/6/11/1244720277422/Aussie-Rugby-League-001.jpg" alt=""/> <img src="http://static.guim.co.uk/sys-images/Sport/Pix/pictures/2010/1/7/1262873655905/Rugby-referee-001.jpg" alt=""/> <img src="http://static.guim.co.uk/sys-images/Sport/Pix/columnists/2011/3/3/1299187263691/football-league-premier-l-007.jpg" alt=""/> </div> 

Js

 var owl = $(".owl-carousel"); owl.owlCarousel({ loop: true, autoplay: true, items: 1, animateOut: 'fadeOut' }); // jQuery method on owl.on('changed.owl.carousel',function(property){ var current = property.item.index; var src = $(property.target).find(".owl-item").eq(current).find("img").attr('src'); console.log('Image current is ' + src); });