Looking into the JQuery Carousel Lite Plugin

Sunday, December 9, 2012

ASP.NET HTML 5 jquery Jquery Carousel Lite

I have been using JQuery for a couple of years now and it has helped me to solve many problems on the client side of web development.

You can find all my posts about JQuery in this link. In this post I will be providing you with a hands-on example on the JQuery Carousel Lite Plugin.If you want you can have a look at this post, where I describe the JQuery Cycle Plugin. I will be writing more posts regarding the most commonly used JQuery Plugins.

I have been using extensively this plugin in my websites.You can show a portion of a set of images with previous and next navigation.

In this hands-on example I will be using Expression Web 4.0.This application is not a free application. You can use any HTML editor you like.

You can use Visual Studio 2012 Express edition. You can download it here.

You can download this plugin from this link

I launch Expression Web 4.0 and then I type the following HTML markup (I am using HTML 5)

<html lang="en">
<head>
    <title>Liverpool Legends</title>

    <meta http-equiv="Content-Type" content="text/html;charset=utf-8" >

    <link rel="stylesheet" type="text/css" href="style.css">

    <script type="text/javascript" src="jquery-1.8.3.min.js"> </script>
     <script type="text/javascript" src="jcarousellite_1.0.1.min.js"></script>

<script type="text/javascript">
        $(function () {
            $(".theImages").jCarouselLite({
                btnNext: "#Nextbtn",
                btnPrev: "#Previousbtn"
            });
        });
    </script>


</head>
<body>
    <header>
        <h1>Liverpool Legends</h1>

    </header>

    <div id="main">


     <img id="Previousbtn" src="previous.png" />
        <div class="theImages">
            <ul>
                <li><img src="championsofeurope.jpg"></li>
                <li><img src="steven_gerrard.jpg"></li>
                <li><img src="ynwa.jpg"></li>
                <li><img src="dalglish.jpg"></li>
                <li><img src="Souness.jpg"></li>

            </ul>
    </div>
    <img id="Nextbtn" src="next.png" />


    </div>


    <footer>

    <p>All Rights Reserved</p>

    </footer>

</body>

</html>

This is a very simple markup. I have added my photos (make sure you use your own when trying this example)

I have added references to the JQuery library (current version is 1.8.3) and the JQuery Carousel Lite Plugin. Then I add 5 images in the theImages div element.

The Javascript code that makes it all happen follows.

<script type="text/javascript">

$(function () {

$(".theImages").jCarouselLite({

btnNext: "#Nextbtn",

btnPrev: "#Previousbtn"

});

</script>

I also have added some basic CSS style rules in the style.css file.

body{
background-color:#efefef;

color:#791d22;

}

#Previousbtn{position:absolute; left:5px; top:100px;}
#Nextbtn {position:absolute; left:812px; top:100px;}
.theImages {margin-left:145px;margin-top:10px;}

It couldn't be any simpler than that. I view my simple in Internet Explorer 10 and it works as expected.

DotNetStories

Looking into the JQuery Carousel Lite Plugin

2 Comments