Sunday, 24 February 2013

JQuery Carousel


JQuery Carousel


Yesterday One of my sub-ordinate asked me can we make Carousel in ASP.Net like we use to do in HTML. I thought for a while and replied :" I have not made any Carousel thing before.Let Me Try.."

After Googling a little I found many ways to achieve the same.. I will share one with you using Jquery Javascript Library..

You will need jquery-latest.pack.js and jcarousellite_1.0.1.js to achieve this functionality.. Just Google and You can download it from standard Jquery Library..

Here is the Code Snippet to achieve this:


<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>Carousel Demo</title>
    <script type="text/javascript" src="Scripts/jquery-latest.pack.js"></script>
 <script type="text/javascript" src="Scripts/jcarousellite_1.0.1.js"></script>
 <script type="text/javascript">
  $(function() {
  $(".myClass").jCarouselLite({
   btnNext: ".next",
   btnPrev: ".prev"
  });
 });
</script>
</head>
<body>
    <form id="form1" runat="server">
<div class="myClass">
    <ul>
        <li><img src="Images/Pic1.jpg" alt="" width="400" height="400"></img></li>
        <li><img src="Images/Pic2.jpg" alt="" width="400" height="400"></img></li>
        <li><img src="Images/Pic3.png" alt="" width="400" height="400"></img></li>
        <li><img src="Images/Pic4.jpg" alt="" width="400" height="400"></img></li>
        <li><img src="Images/Pic5.png" alt="" width="400" height="400"></img></li>
        <li><img src="Images/Pic6.png" alt="" width="400" height="400"></img></li>
        <li><img src="Images/Pic7.jpg" alt="" width="400" height="400"></img></li>
    </ul>
</div>
<button class="prev"><<</button>
<button class="next">>></button>
    </form>
</body>
</html>


and Here is the Output:



No comments:

Post a comment

Thank You for Your Comments. We will get back to you soon.

back to top