Pages

Thursday, October 28, 2010

Jquery carousel-Riding carousels with jQuery

Ref:http://sorgalla.com/projects/jcarousel/#Configuration


<script type="text/javascript" src="/path/to/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="/path/to/lib/jquery.jcarousel.min.js"></script>
<link rel="stylesheet" type="text/css" href="/path/to/skin/skin.css" />

//script part

// for carosel
jQuery(document).ready(function() {  
var id=10;
 var listOfEle = jQuery(".carousel_list_customize_"+id+" ul li"); 
 
 if(listOfEle.length >= 2 ){
  $(".carousel_list_customize_"+id).jCarouselLite({
      btnNext: "#photo_nav_next_"+id,
      btnPrev: "#photo_nav_prev_"+id,
      scroll: 2,
      visible: 2
     });  
   
    }

});



//Html
------------------

  <div style="width:200px; height:10px; float:left">
        <div align="left" style="float:left" class="linkPrevious"><a id="photo_nav_prev_10"> &lt;&lt;</a></div>
        <div align="left" class="carousel_list_customize_10" style="width:300px; float:left">
    <ul id="mycarousel" style="float:left">
      
    <?php for($vLoop=0;$vLoop<30;$vLoop++){ ?>
     <li>
      
       <a href="#">testing<?=$vLoop?></a> 
      
     </li>
    <?php } ?>
   
          </ul>
        </div>
        <div align="left" class="linkNext"> <a id="photo_nav_next_10">&gt;&gt;</a> </div>
      </div>

No comments:

Post a Comment