Trigger an event after adding a class in jquery

Question

I have a slider and it's automatically changing the contents.

<div class="main-slider">
  <div class="slide slide-active" data-num="1"> <img> </div>
  <div class="slide"  data-num="1"> <img> </div>
  <div class="slide" data-num="2"> <img> </div>
  <div class="slide"  data-num="3"> <img> </div>
</div>

Here when slider is working this slide-active class is automatically changed to next slide .

What I need is, I need to trigger an event when slide active class is changed . For example I need to alert the corresponding data-num value of active slide.

How I can do this ?

the place where you are adding `slide-active` class to next element , there you can trigger. — Durga, Sep 19 '17 at 07:38
Are you using a jQuery plugin for the slideshow? If yes, then it probably has an event like `onSlide` (or something similar) where you can get the `data-num` of the slide. — dork, Sep 19 '17 at 07:42
After searching i get the answer from https://stackoverflow.com/questions/1950038/jquery-fire-event-if-css-class-changed#answer-14084869 . — Abilash Erikson, Sep 19 '17 at 08:21

Thusitha · Answer 1 · 2017-09-19T08:00:32.933

1

Since you are using FlexSlider refer the original documentation. It has an event called after which will fire when a slide gets animated.

$(".main-slider").flexslider({
  after: function(){
     alert($(".slide-active:eq(0)").attr("data-num"));
  }
});

Hope this might helps...

Read more about here https://github.com/woocommerce/FlexSlider/wiki/FlexSlider-Properties

edited Sep 19 '17 at 08:00

answered Sep 19 '17 at 07:52

Thusitha

3,393
3
21
33

for some reason after is not working . Start function is working . That's why i posted here . How we can achieve this without using .flexslider – Abilash Erikson Sep 19 '17 at 07:59
You have to use your flex slider init class name. In your case it is main-slider – Thusitha Sep 19 '17 at 08:00

score -1 · Answer 2 · answered Sep 19 '17 at 07:39

if id didn't get it wrong your code already moves slide-active class to the next slide, right? so for making the slider you need a for loop and you set var i and add one to it each time. ( start from 0 index num untill your slide class number ) you should add the alert event in the for loop so when ever slide changed it triggers alert.

this might be a little confusing so plz add your JS code so i can help u better

good luck

Trigger an event after adding a class in jquery

2 Answers2