Integrate jCarouselLite into sharepoint 201 Content editor webpart. as Image Slider

since sharepoint 2010 support jquery as client size  programing.. it is conveniently to integrate the jquery to improve user experience.

you can find one image slider from this link http://www.gmarwaha.com/jquery/jcarousellite/

though the web site offer free download and demo to show you use to this handy plugin. however, you still

a little tweak to make it work in your sharepoint 2010 site. the demo only give you a very simple code.

you need to set all the options (i highlight all the options that need to configure) before the slider can function in sharepoint 2010 web site.

here is the code that working fine in my website you can just copy the code and change the anchor url reference and image path to your specific case. then image slider will proper setup and running in your site.

<script type="text/javascript" src="../jcarousellite_1.0.1.js"></script>
<script type="text/javascript">
$(function() {
    $(".MyClass").jCarouselLite({
        btnNext: ".next",
        btnPrev: ".prev",
       btnGo: null,
        mouseWheel: false,
        auto: null,
        speed: 1000,
        easing: null,
        vertical: false,
        circular: true,
        visible: 5,
        start: 0,
        scroll: 1,
    });
});

</script>


<style type="text/css">
img {
margin-left:3px;
margin-right:3px;
}


#middleContent {
    float:left;
    width:595px;
}
#leftContent {
    margin-top:10px;
     float:left;
    width:35px;
}
#rightContent {
    margin-top:10px;
    float:left;
    width:10px;
}

</style>


<div id="leftContent">
<button class="prev">&lt;&lt;</button>
</div>       
<div class="MyClass" id="middleContent">
    <ul>
        <li><a href="url1" target="_blank" ><img src="MyImage1" alt=""  width="200" height="50"  ></a></li>
        <li ><a href="url2" target="_blank" ><img src="MyImage2" alt="" width="200" height="50" ></a></li>
        <li ><a href="url3" target="_blank" ><img src="MyImage3" alt="" width="200" height="50" ></a></li>
        <li ><a href="url4" target="_blank" ><img src="MyImage4" alt="" width="185" height="44" ></a></li>
        <li ><a href="url5" target="_blank" ><img src="MyImage5" alt="" width="200" height="50" ></a></li>
    </ul>
</div>
<div id="rightContent">
    <button class="next">&gt;&gt;</button>
    </div>