Post
Ask Question

jQuery Image Slider

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" %>  
  2.   
  3. <!DOCTYPE html>  
  4.   
  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>  
  8.   
  9.     <link href="CSS/bjqs.css" rel="stylesheet" />  
  10.     <link href="CSS/demo.css" rel="stylesheet" />  
  11.   
  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">  
  17.   
  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.                     });  
  38.   
  39.                 });  
  40.                         </script>  
  41.         </div>  
  42.   
  43.   
  44.         <script src="JavaScript/libs/jquery.secret-source.min.js"></script>  
  45.         <script>  
  46.             jQuery(function ($) {  
  47.   
  48.                 $('.secret-source').secretSource({  
  49.                     includeTag: false  
  50.                 });  
  51.   
  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;  
  8.   
  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.         }  
  18.   
  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.


Similar Articles