In this article I am going to show how we can show
images from a folder as Image Slider by using jQuery.
Below 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 Next Button or below number to go next image.
Image 4.