In this article I show how to show images from a folder as an Image Slider using jQuery.

The following is my aspx code:

  1. <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="ImageSlider.aspx.cs" Inherits="ImageSliderFromAFolder.ImageSlider" %>
  3. <!DOCTYPE html>
  5. <html xmlns="http://www.w3.org/1999/xhtml">
  6. <head id="imgHead" runat="server">
  7. <title>Image Slider From a Folder using jQuery</title>
  9. <link href="CSS/bjqs.css" rel="stylesheet" />
  10. <link href="CSS/demo.css" rel="stylesheet" />
  12. <script src="JavaScript/jquery-1.7.1.min.js"></script>
  13. <script src="JavaScript/bjqs-1.3.min.js"></script>
  14. </head>
  15. <body>
  16. <form id="form1" runat="server">
  18. <div id="container">
  19. <div id="Image-fade">
  20. <ul class="bjqs">
  21. <asp:Repeater ID="ImgSliderRPT" runat="server">
  22. <ItemTemplate>
  23. <li>
  24. <img src='<%# DataBinder.Eval(Container.DataItem,"Value") %>'
  25. title='<%# (DataBinder.Eval(Container.DataItem,"Text").ToString()).Split('.')[0].ToString() %>' alt="Image Slider">
  26. </li>
  27. </ItemTemplate>
  28. </asp:Repeater>
  29. </ul>
  30. </div>
  31. <script class="secret-source" style="display: none;">
  32. jQuery(document).ready(function ($) {
  33. $('#Image-fade').bjqs({
  34. height: 400,
  35. width: 700,
  36. responsive: true
  37. });
  39. });
  40. </script>
  41. </div>
  44. <script src="JavaScript/libs/jquery.secret-source.min.js"></script>
  45. <script>
  46. jQuery(function ($) {
  48. $('.secret-source').secretSource({
  49. includeTag: false
  50. });
  52. });
  53. </script>
  54. </form>
  55. </body>
  56. </html>

Now my aspx.cs code is:

  1. using System;
  2. using System.Collections.Generic;
  3. using System.IO;
  4. using System.Linq;
  5. using System.Web;
  6. using System.Web.UI;
  7. using System.Web.UI.WebControls;
  9. namespace ImageSliderFromAFolder
  10. {
  11. public partial class ImageSlider : System.Web.UI.Page
  12. {
  13. protected void Page_Load(object sender, EventArgs e)
  14. {
  15. if (!Page.IsPostBack)
  16. GetImageSlider();
  17. }
  19. private void GetImageSlider()
  20. {
  21. string[] filePaths = Directory.GetFiles(Server.MapPath("~/MyImages/"));
  22. List<ListItem> files = new List<ListItem>();
  23. foreach (string filePath in filePaths)
  24. {
  25. string fileName = Path.GetFileName(filePath);
  26. files.Add(new ListItem(fileName, "MyImages/" + fileName));
  27. }
  28. ImgSliderRPT.DataSource = files;
  29. ImgSliderRPT.DataBind();
  30. }
  31. }
  32. }

Images in my Folder:


Image 1.

Now run the application:


Image 2.


Image 3.

Click the Next Button or below on a number to go to another image.


Image 4.