Bind Image Slider With a Folder (Without Database) in ASP.NET C#

• Download source - 592.8 KB

Introduction

Here in this tip, I will show you how to bind an image slider with a folder, so that you don't need to create database for a slider. Just put images or replace images to change slider.

Using the Code

So how to do this? I have taken a repeater to show the slider. What actually does a slider hold? A bunch of li within ul. So place one li into the repeater to Repeater the image slider. And behind the binding logic, I discovered the images within a directory (or folder) and put the image path within a List. Bind the list with the repeater.

Put all the resources into your solutions like the CSS, JS, images into your Solution Explorer. Let's look at how the image slider was placed in HTML.

<div id="banner-fade"><img title="title1" 
src="img/banner01.jpg" />
<img title="title1" src="img/banner01.jpg" />
<img title="title1" src="img/banner01.jpg" />
<ul class="bjqs">
    <li><img title="title1" src="img/banner01.jpg" /></li>
</ul>
</div>

Now let's look at how I change the li with the repeater.

<div id="banner-fade">
<ul class="bjqs">
    <li><asp:Repeater ID="Repeater1" runat="server"> <itemtemplate /></li>
    <li><img title="<image title>" src="<the image source>" /></li>
</ul>
</div>

Change the repeater name according to your name.

Everything up to now is about designing. Now let's come to the code directly. Here, I get all the file names within a particular folder and then store those into the List and then bind the repeater with the List. Check its code.

string[] filePaths = Directory.GetFiles(Server.MapPath("~/img/"));
List<listitem> files = new List<listitem>();
foreach (string filePath in filePaths)
{
    string fileName = Path.GetFileName(filePath);
    files.Add(new ListItem(fileName, "img/" + fileName));
}
Repeater1.DataSource = files;
Repeater1.DataBind();

Place the code into the Page_Load of your page to start the slider. Here, I have bind with the img folder. Replace the name according to your project.

Points of Interest

Here your slider is binding with the folder, so there are no more issues to write the SQL queries or any update delete adding of images. As simple as that! You can also bind other things similar to slider like accordion, carousel, etc.