Multiple instances of flexslider on a single page

<div class="slider">
     <div class="flexslider c_slider">
         <ul class="slides">
             <li><img src="1.jpg" width="440" height="270" /></li>
             <li><img src="2.jpg" width="440" height="270" /></li>
             <li><img src="3.jpg" width="440" height="270" /></li>          
         </ul>
        </div>
        <div class="flexslider c_carousel">
           <ul class="slides">
              <li><img src="140x95.jpg" width="91" height="60" /></li>
              <li><img src="140x95.jpg" width="91" height="60" /></li>
              <li><img src="140x95.jpg" width="91" height="60" /></li>          
          </ul>
      </div>
 </div>
jQuery(document).ready(function(){
	jQuery('.c_carousel').each(function(index){
		if(jQuery(".c_carousel").eq(index).length) {
			jQuery('.c_carousel').eq(index).flexslider({
				animation: "slide",
				controlNav: false,
				directionNav:true,
				animationLoop: false,
				slideshow: true,
				itemWidth: 91,
				pausePlay: false,
				asNavFor: '.c_slider:eq('+index+')',
				itemMargin: 7,
				minItems: 4,
				maxItems: 4,
				move: 4
			});
		}

		if(jQuery('.c_slider').eq(index).length){
			 jQuery('.c_slider').eq(index).flexslider({
				animation: "slide",
				controlNav: false ,
				directionNav:true,
				animationLoop: false,
				slideshow: true,
				pausePlay: false,
				video: true,
				sync: ".c_carousel:eq("+index+")", 
			  });
		  }
	  })
    });
0 0 votes
Article Rating
Subscribe
Notify of
guest

0 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments