multiple instances of flexslider on a single page

When I was developing a website. In that, I wanted to use multiple instances of flexslider on a single page. There was not the problem if ID of the container tags is different. But on my website, everything was dynamic, even how many flexslider instances were be called, that was also unknown. I had to use flexslider with thumbnails carousel also. I googled on this problem but not getting proper solution.

My problem was as follows:

HTML Structure

This structure renders dynamically and It can be any numbers and every thumbnail carousel should be sync with its main slider.

I was using wooTheme flexslider latest jquery plugin for getting slider. Wootheme flexslider can be implemented as follows :

Note: The slider being synced must be initialized first

It means if we want to use thumbnail carousel and sync with the main carousel then we need to initialized thumbnail carousel first and then main slider as given in above example.

Multiple instances of flex slider

There may be the different ways to implement this, but I implement multiple instances of flexslider in single page is as follows:

In above given code, I use jQuery $.each function to implement flexslider. In this loop, We are iterating ‘c_carousel’ class tags and using index, we are accessing every tag separately. Because we need to specify “asNavFor” property to associated main slider. Same as ‘asNavFor’, we need to specify ‘sync’ property to associated carousel slider.

Note: For Working these implementation, we need to set ‘animationLoop’ property as false, otherwise it won’t sync properly.
Slides in carousel should be same in numbers as associated main slider.