Milan Nankov – Blog

Slide Changed Event When Using FlexSlider With Meta Slider 2014/11/03

I was very surprised that I could not find an article or Stackoverflow entry that demonstrates how one can detect when slides change when working with Meta Slider and FlexSlider. Now that I have figured it out I decided to share what I’ve learned. As you might expect the task is very trivial. We only need to do two things:

  1. User a WordPress filter provided by Meta Slider
  2. Add JavaScript functions that will handle the events

 

Meta Slider provides several filters that allow you to hook into and modify the behaviour of Meta Slider. The full list and more detailed descriptions of each filter can be found here. Since I am using FlexSlider I had to use the metaslider_flex_slider_parameters filter. What this filter does is allow us to set properties on FlexSlider. Flex slider defines several callbacks that are triggered on various events. You can have a look at the API here. For this example I am going to use the after() callback function but you can use any of the available ones.

 

User a WordPress filter provided by Meta Slider

We add the following code in functions.php of our theme or another suitable place.
What this does is set onHomePageSlideChanged as callback function and whenever a slider is changed the specified function will be invoked.

Add JavaScript functions that will handle the events

The only thing left to do is define our callback function. If we are devleoping a theme we can simply add the code to the JavaSript file of the theme.

Easy as pie.

Cheers.