Add class when flexslider slide is active(flex-active-slide)

JavaScript
1

I’m trying to figure out on how i can modify the plugin to add class when the current slide is show or active. I’m using woothemes flexslider. The reason for this is so that i can add some animation(http://daneden.github.io/animate.css/) on the text when the current slider is active.

-HTML MARKUP-

    <div class="flexslider">
        <ul class="slides">
		
  	    <li>
		    <div class="slide_content slide_copy1">
	            <h2>Lorem ipsum dolor sit amet</h2>
				<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus ultrices lectus a arcu semper convallis. </p>
		    </div>
  	        <img src="<?php bloginfo('template_url'); ?>/images/standard_slide2.jpg" />
  	    </li>
	
		
  	    <li>
		    <div class="slide_content slide_copy2">
			    <iframe src="//www.youtube.com/embed/XjWOqinu_q0" frameborder="0" allowfullscreen></iframe>
	            <h2>Lorem ipsum dolor sit amet</h2>
				<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus ultrices lectus a arcu semper convallis. </p>
		    </div>
  	    <img src="<?php bloginfo('template_url'); ?>/images/standard_slide3.jpg" />
  	    </li>
		
        </ul>
    </div>

-CSS-

    .slides li{position:relative}

    .slide_content{position:absolute; }

    .slide_copy1{top:50%; left:200px; width:500px;  }

    .slide_copy1 h2, .slide_copy1 h3{
    text-transform:uppercase;
    background-color:#0062ad;
    display:inline-block;
    padding:5px;
    margin-bottom:3px;
    color:white;
    font-family: 'caviar_dreamsregular', sans-serif;
	font-size:35px
    }

    .slide_copy1 p{font-family:'Calibri', sans-serif; color:#0062ad; background-color:white; padding:10px; line-height:20px;}

    .slide_copy2{top:25%; right:75px; width:500px}

    .slide_copy2 h2{
    text-transform:uppercase;
	color:#0062ad;
	font-family:'caviar_dreamsregular', sans-serif;
	font-size:35px;
	margin-bottom:20px
    }

    .slide_copy2 p{
    color:#0062ad;
	font-family:'Calibri', sans-serif;
	line-height:20px;
	font-weight:bold
    }

-JAVASCRIPT-

    <script>
    $(window).load(function(){
      $('.flexslider').flexslider({
        animation: "slide",
		slideshow: true,
		direction: "vertical",
		slideshowSpeed: 4500,
		animationSpeed: 2000,
		mousewheel: false,
      });
    });
    </script>
2

Hi,

According to the demo page, the slides receive a class of “flex-active-slide” when they are active.
Is this what you are after?

3

yes they receive “flex-active-slide” when it is showing the current slide. What i want to do is when the current slide is being shown it will add a custom class inside the slide.

4

Well, it seems to have a callback API, which is comprised of the following:

// Callback API
start: function(){},            //Callback: function(slider) - Fires when the slider loads the first slide
before: function(){},           //Callback: function(slider) - Fires asynchronously with each slider animation
after: function(){},            //Callback: function(slider) - Fires after each slider animation completes
end: function(){},              //Callback: function(slider) - Fires when the slider reaches the last slide (asynchronous)
added: function(){},            //{NEW} Callback: function(slider) - Fires after a slide is added
removed: function(){}           //{NEW} Callback: function(slider) - Fires after a slide is removed

Source: http://www.woothemes.com/flexslider/

Therefore, I would think that you could do:

$('.flexslider').flexslider({
  animation: "slide",
  // More options
  after: function(slider){
    $(silder).find(".flex-active-slide").addClass("myClass");
  }
});

Or something similar

5

Actually this is what i did

<script>
$(document).ready(function(){
    $(".slide1 .flex-active-slide").ready(function(){
	    $(".slide_copy1").addClass("animated slideInLeft");
	});
	
	$(".slide2 .flex-active-slide").ready(function(){
	    $(".slide_copy2").addClass("animated slideInLeft");
	});
})
</script>

But the problems is, on slide2 it adds the class automatically once the page has loaded. I’m not familiar with the library for jQuery and i’m still looking for the right code in the API Documentation

6

Ok, but what speaks against the solution I posted?

7

Sorry i forgot to mention about that but it didn’t seem to work. I even tried inspecting the element and no class was added

8

Ok, well if you could make a demo page with just the slider on it, I don’t mind taking a look.

9

Here is my work in progress sir. I have just uploaded it onto our server

http://digitalspin.ph/standardwash/

10

The code I posted works for me:

after: function(slider){
  $(slider).find(".flex-active-slide").addClass("myClass");
}

This callback fires whenever an animation has finished and adds a class of “myClass” to whatever element(s) within the slider have a class of “flex-active-slide”
You might need to expand it a little to ensure that there is only one elemenet with the class “myClass” at any one time:

before: function(slider){
  $(slider).find(".myClass").each(function(){
    $(this).removeClass("myClass");
  });
},
after: function(slider){
  $(slider).find(".flex-active-slide").addClass("myClass");
}