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.