In this article I show how to show images from a folder as an Image Slider using jQuery.
The following is my aspx code:
- <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="ImageSlider.aspx.cs" Inherits="ImageSliderFromAFolder.ImageSlider" %>
-
- <!DOCTYPE html>
-
- <html xmlns="http://www.w3.org/1999/xhtml">
- <head id="imgHead" runat="server">
- <title>Image Slider From a Folder using jQuery</title>
-
- <link href="CSS/bjqs.css" rel="stylesheet" />
- <link href="CSS/demo.css" rel="stylesheet" />
-
- <script src="JavaScript/jquery-1.7.1.min.js"></script>
- <script src="JavaScript/bjqs-1.3.min.js"></script>
- </head>
- <body>
- <form id="form1" runat="server">
-
- <div id="container">
- <div id="Image-fade">
- <ul class="bjqs">
- <asp:Repeater ID="ImgSliderRPT" runat="server">
- <ItemTemplate>
- <li>
- <img src='<%# DataBinder.Eval(Container.DataItem,"Value") %>'
- title='<%# (DataBinder.Eval(Container.DataItem,"Text").ToString()).Split('.')[0].ToString() %>' alt="Image Slider">
- </li>
- </ItemTemplate>
- </asp:Repeater>
- </ul>
- </div>
- <script class="secret-source" style="display: none;">
- jQuery(document).ready(function ($) {
- $('#Image-fade').bjqs({
- height: 400,
- width: 700,
- responsive: true
- });
-
- });
- </script>
- </div>
-
-
- <script src="JavaScript/libs/jquery.secret-source.min.js"></script>
- <script>
- jQuery(function ($) {
-
- $('.secret-source').secretSource({
- includeTag: false
- });
-
- });
- </script>
- </form>
- </body>
- </html>
Now my aspx.cs code is:
- using System;
- using System.Collections.Generic;
- using System.IO;
- using System.Linq;
- using System.Web;
- using System.Web.UI;
- using System.Web.UI.WebControls;
-
- namespace ImageSliderFromAFolder
- {
- public partial class ImageSlider : System.Web.UI.Page
- {
- protected void Page_Load(object sender, EventArgs e)
- {
- if (!Page.IsPostBack)
- GetImageSlider();
- }
-
- private void GetImageSlider()
- {
- string[] filePaths = Directory.GetFiles(Server.MapPath("~/MyImages/"));
- List<ListItem> files = new List<ListItem>();
- foreach (string filePath in filePaths)
- {
- string fileName = Path.GetFileName(filePath);
- files.Add(new ListItem(fileName, "MyImages/" + fileName));
- }
- ImgSliderRPT.DataSource = files;
- ImgSliderRPT.DataBind();
- }
- }
- }
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.