Introduction

Here you will see a jQuery image sliders control that is very useful for displaying images and photos and making the viewing of images more pleasant and intuitive on our website. In this article, we make an auto-playing image slider. Users can also manually select content to see or have them rotated automatically.
Use the following simple procedure to create a sample.
Step 1: Create a simple application in Visual Studio.
Step 2: Now add the references of CSS and js files in the head section.
  1. <head runat="server">
  2. <script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
  3. <link href="Styles/nivo-slider.css" rel="stylesheet" type="text/css" />
  4. <link href="Styles/Default.css" rel="stylesheet" type="text/css" />
  5. <script src="Scripts/Demo.js" type="text/javascript"></script>
  6. <title></title>
  7. </head>
These files above are attached in the Zip file. You can download these files from the attached file.
Step 3: Now add the following code to the body section that contains four images on the page.
  1. <body>
  2. <form id="form1" runat="server">
  3. <div class="slider-wrapper theme-default">
  4. <div id="nivo-slider" class="nivoSlider" style="width: 960px">
  5. <img src="1.jpg" alt="" />
  6. <img src="2.jpg" alt="" />
  7. <img src="3.jpg" alt="" />
  8. <img src="4.jpg" alt="" />
  9. </div>
  10. </div>
  11. </form>
  12. </body>
Step 4: Now add the following .js code to the body section.
  1. <script type="text/javascript">
  2. $(window).load(function () {
  3. $('#nivo-slider').nivoSlider();
  4. });
  5. </script>
Step 5: Default.ASPX code
  1. <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default2.aspx.cs" Inherits="Default2" %>
  3. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  4. <html xmlns="http://www.w3.org/1999/xhtml">
  5. <head runat="server">
  6. <title></title>
  7. <script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
  8. <link href="Styles/nivo-slider.css" rel="stylesheet" type="text/css" />
  9. <link href="Styles/Default.css" rel="stylesheet" type="text/css" />
  10. <link href="Styles/nivo-slider.css" rel="stylesheet" type="text/css" />
  11. <script src="Scripts/Demo.js" type="text/javascript"></script>
  12. </head>
  13. <body>
  14. <form id="form1" runat="server">
  15. <div class="slider-wrapper theme-default">
  16. <div id="nivo-slider" class="nivoSlider">
  17. <img src="1.jpg" alt="" />
  18. <img src="2.jpg" alt="" />
  19. <img src="3.jpg" alt="" />
  20. <img src="4.jpg" alt="" />
  21. </div>
  22. </div>
  23. <script type="text/javascript">
  24. $(window).load(function () {
  25. $('#nivo-slider').nivoSlider();
  26. });
  27. </script>
  28. </form>
  29. </body>
  30. </html>
Step 6: Now run the application.
Image Slider
We can manually select an image from the Slider.
Select Image from Slider