Flexslider is awesome. Responsive design ready (screen resolution independent) and supports swipe out of the box. Just I needed for this new mobile project that I am working on.
This is what it says:
The new callback API gives you full control over all of your sliders. The callback functions currently available are start(), which fires after the plugin is initialized, before(), which fires before/asynchronously with every slide animation, after(), which fires after every slide animation completes, and end(), which fires when you reach the last slide. Each callback function will accept one parameter, which will embody the slider element.
The following example demonstrates how you could track slider counter information, such as “3 of 12″ using the callback functions. First, we use the start() callback to gather the total slides. We only need to do this once, so start() is a good place for this. Notice that start() accepts the slider element as a parameter and then calls the slider.count property. Count is just one of many properties tied to every slider instance that are available to you through the callback functions. The last step in this demonstration is using the after() callback to update the current slide information after each animation. You will notice another slider property used here to gather the current slide information, slider.currentSlide.
What I wanted to do was store some data-* stuff (text, url etc.) in the li tag of each slide, and after the animation is done, I want use jquery to load that stuff in other parts of the page.
Simple test
I have data-category in each of li. I just want to fire that up in “console.log.”
<script type="text/javascript">
$(window).load(function(){
$('.flexslider').flexslider({
animation: "slide",
after: function(slider){
console.log($('.flex-active-slide').attr('data-category'))
}
});
});
</script>
That was easy! All I have to do was wire the ids and .text to corresponding text. Love flexslider.
