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+")", 
			  });
		  }
	  })
    });

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes:

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>