Bind an image slider with a folder(Without database) in ASP.NET C#

Hello every one, today in this tutorial I will show you how to bind your image slider with a folder, where all the images will come from that folder without any database. Just dump your photos into that folder and the slider will automatically get the images to show with all the animations.

So first know how to get the all file names and files within a folder.

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

In this way we will get the all files details with the img folder.

Now its time for the slider. Get any slider's html file from any where or write your own code. And now xopy all the resources in your project.

Now create a new web page and copy the head section. Now in the body where actually your slider is presented, change that code with a repeater.

<div id="banner-fade">
<!-- start Basic Jquery Slider -->
 <ul class="bjqs">
      <asp:Repeater ID="Repeater1" runat="server">
           <ItemTemplate>
              <li>
                  <img src='<%# DataBinder.Eval(Container.DataItem,"Value") %>' title='<%# (DataBinder.Eval(Container.DataItem,"Text").ToString()).Split('.')[0].ToString() %>' alt=""></li>
            </ItemTemplate>
        </asp:Repeater>
  </ul>
 <!-- end Basic jQuery Slider -->
</div>

DataBinder.Eval(Container.DataItem,"Value") this one denotes the image url
and
(DataBinder.Eval(Container.DataItem,"Text").ToString()).Split('.')[0].ToString() this one displays the file name without extension.

Now bind the repeater with the above code.

protected void Page_Load(object sender, EventArgs e)
{
     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();
}

Now run your code and don't forget to put some images into your image folder.

Download the full source code.

Download Now