Owl Carousel 2 - Get src of current slide

Question

I have the following code blocks. All i'm trying to do is get the src of the current image in the slide show. It's not working, nothing appears in the console at all despite it changing slide fine.

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);
    }
});

wildavies · Accepted Answer · 2015-01-19T22:03:27.423

The reason your code is not working is that there is no onChange callback defined for Owl Carousel.

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

If you update it to use "afterMove" it will work correctly after the slide has been moved.

You might also want to consider using "afterAction" which fires on startup, 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

Following further reading of the link provided in the comments and the documentation for owl carousel 2 here is a working example using owl carousel 2. See this jsfiddle

Like anything in beta the github issues and answers can be quickly out of date. Found the solution from the documentation on the owl carousel 2 site 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);
});

Actually, onChange does work (https://github.com/OwlFonk/OwlCarousel/issues/222#issuecomment-41021575) without the function, there's an issue with the function i think. If i run an alert or console.log from within onChange on it's one it works fine. I'm using owl carousel 2. afterMove was used in my original code block but that didn't work either, onChange is the one i need for my script. — Andy Holmes, Jan 19 '15 at 15:24
@AndyHolmes - just had a look through the documentation on the owl carousel 2 site and got it working for you. See the edited answer above. — wildavies, Jan 19 '15 at 21:56
Thank you so much!! This solved my issue. So that's how you get the `item.index`, through your method. Thank you! — theGreenCabbage, Jan 29 '15 at 15:38
There is neither an `afterAction` nor `afterMove` in Owl Carousel 2. You should remove this as best answer so as not to confuse stragglers like me... — , Mar 06 '15 at 16:46
@LyndonJohnson - read the whole question including the edit for the correct answer. — wildavies, Mar 07 '15 at 19:13

Owl Carousel 2 - Get src of current slide

1 Answers1

Edit

Linked