Jcarousellite and carousel slider for content

Some people asked me how to make a content slider like media section in templates Simplex Transcript and Simplex Blognews . Content slider in media section was made using a plugin of Jquery ,Jcarousellite .

To install this plugin into your site ,you can follow instruction bellow

1,Download jquery frameword here and Jcarousellite here
You can also download Mousewheel plugin if you want to move slider by mousewheel and Easing plugin if you want interesting effects for slider
Then upload these files to a host that support javascript .

2,Go to Blogger Dashboard ,continue to Design ,and to Page elements .Create a HTML/Javascript widget and then paste the following script into widget content .
<script type="text/javascript" src=" path to jquery.js"></script>
<script type="text/javascript" src="path to jcarousellite.js"></script>

<!-- Optional -->
<script type="text/javascript" src="path to easing.js"></script>
<script type="text/javascript" src="path to mousewheel.js"></script>

remember to change path to .... (marked in bold) to URL of js files hosted in step 1 .

3,HTML Structure of carousel slider like bellow :
<button class="prev"><<</button>
<button class="next">>></button>
       
<div class="anyClass">
    <ul>
        <li><img src="someimage" alt="" width="100" height="100" ></li>
        <li><img src="someimage" alt="" width="100" height="100" ></li>
        <li><img src="someimage" alt="" width="100" height="100" ></li>
        <li><img src="someimage" alt="" width="100" height="100" ></li>
    </ul>
</div>

copy this script and paste bellow the code in step 2 .Replace the text in bold to anything you want to show in carousel slider . You can add a little of CSS for decorating your carousel slider by a code like this :

<style>
.prev { .....}
.next { .....}
.anyclass {.....}
.anyclass ul { .....}
.anyclass ul li {.......}
</style>
replace .... with CSS attributes to make carousel slider displayed as you want .
This CSS code should be place above HTML structure in HTML/Javascript widget .

4,After having elements for carousel slider ,we can make it work by adding this under the code in step 3 :
$(function() {
    $(".anyClass").jCarouselLite({
        btnNext: ".next",
        btnPrev: ".prev"
    });
});

5,Save widget and we have a carousel slider for site or blog . The code in this post is not completed ,you have to add CSS or HTML to make it display as you want . Jcarousel also comes with some options and its option can be see here

6,If you want to show latest posts in a category in carousel slider ,you can using Jcarousel code with Recent post code as the way showed in this post or this post
You can also see the code of my templates for more detail .

I hope this post helpful to you .