Email: Password:       Forgot Password 
A Saarsha Group Online Community for dot net codes group like C#, Asp.NET, VB.NET, Sharepoint, JavaScript, JQuery, Ajax, SQL, WCF, WPF.

jQuery - Image Slider

Viewed:  2349 
Posted On:  10/12/2014 21:58:51 
How we can show images from a folder as an Image slider using jQuery ? 

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="">
<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>
    <form id="form1" runat="server">
        <div id="container">
            <div id="Image-fade">
                <ul class="bjqs">
                    <asp:Repeater ID="ImgSliderRPT" runat="server">
                                <img src='<%# DataBinder.Eval(Container.DataItem,"Value") %>'
                                   title='<%# (DataBinder.Eval(Container.DataItem,"Text").ToString()).Split('.')[0].ToString() %>' alt="Image Slider">

            <script class="secret-source" style="display: none;">
                jQuery(document).ready(function ($) {
                        height: 400,
                        width: 700,
                        responsive: true

<script src="JavaScript/libs/jquery.secret-source.min.js"></script>

            jQuery(function ($) {
                    includeTag: false

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)
        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;

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.

         HOME   |   Submit Article   |   Contact Us   |   About Us   |   Terms & Condition   |   Advertise With us