jQuery onChange function affects all sliders

Question

I only want to add "fadeInLeft" class to the next carousel item's caption(h1 tag) but not the other h1 tags from its items' siblings as well as remove the class if it exist to be able to see the fadeInLeft effects when slide.

So this is my jQuery function:

function onChange() {
var el = $('.owl-carousel h1');
if ((el).is('.animated.fadeInLeft')) {
    el.removeClass('fadeInLeft')
        .addClass('fadeInLeft');
} else {
    el.addClass('fadeInLeft');
  }
}

$('.owl-carousel').owlCarousel({
   onChange: onChange,
   items: 1,
   loop: true,
   nav: true,
   pagination: true
});

And this is the content:

<div class="owl-carousel owl-theme">
<div class="item item1">
    <div class="inner">
        <h1 class="animated fadeInLeft">Some Text</h1>
    </div>
</div>
<div class="item item2">
    <div class="inner">
        <h1 class="animated">Some Text</h1>
    </div>
</div>
<div class="item item3">
    <div class="inner">
        <h1 class="animated">Some Text</h1>
    </div>
</div>

I use animate.css and owl-carousel plugin.

Please help me and thanks in advance.. :)

How is `onChange()` being called? Why is your selector so inclusive? — James Hill, May 19 '16 at 08:16
Sorry I forgot to include that, please see the changes/edit. — Randy, May 19 '16 at 08:27

score 0 · Answer 1 · answered May 19 '16 at 08:21

0

use

var e1 = $(this).find('h1');

instead of

var el = $('h1');

answered May 19 '16 at 08:21

Rai Ammad Khan

1,521
2
14
26

It doesn't add the class. – Randy May 19 '16 at 08:31

score 0 · Answer 2 · answered May 19 '16 at 08:42

0

Try :

 var el = $('.yourclass h1').first();

Or :

var el = $('.yourclass h1').next(); if you really meant the next one

answered May 19 '16 at 08:42

ArteFact

517
4
14

score 0 · Answer 3 · answered May 19 '16 at 09:16

use this.currentItem to find current item and the use next() to find the next item, then find h1 and do your success code...

$('.owl-carousel').owlCarousel({
   onChange: function (elem) {
              var current = this.currentItem;
              var el = elem.find(".owl-carousel").eq(current).next().find('h1');
              if ((el).is('.animated.fadeInLeft')) {
                    el.removeClass('fadeInLeft')
                        .addClass('fadeInLeft');
                } else {
                    el.addClass('fadeInLeft');
                  }
                }
            },
   items: 1,
   loop: true,
   nav: true,
   pagination: true
});

I think it's almost there because this is much similar from this [post](http://stackoverflow.com/questions/28022311/owl-carousel-2-get-src-of-current-slide) . I got it working from that post but the function stops when the sliders end, meaning it doesn't repeat when all the items end. So the fadeInLeft class is always there. And yours has an error on the line of declaring the _variable_ **el**. — Randy, May 19 '16 at 15:45

score 0 · Answer 4 · answered May 20 '16 at 10:05

This solved my issues

var slider = $('.owl-carousel').owlCarousel({
  items: 1,
  loop: true,
  nav: true,
  pagination: true
});

slider.on('changed.owl.carousel', function(property) {
  var current = property.item.index;
  var el = $(property.target).find(".owl-item").eq(current).find("h1");

  var elPrev = $(property.target).find(".owl-item").eq(current).prev().find("h1");
  var elNext = $(property.target).find(".owl-item").eq(current).next().find("h1");

  elPrev.removeClass('fadeIn');
  elNext.removeClass('fadeIn');

  if (!(el).is('.fadeIn')) {
      el.addClass('fadeIn');
    }
  });

I should have read more the documentation. Anyway thanks for the help guys! You gave me some ideas. :)

jQuery onChange function affects all sliders

4 Answers4

This solved my issues