Bind an image slider with a folder

Introduction :

Here I will show you all how to create image slider with the images from a specific folder in asp.net  using c#. Whichever images are present in the folder it will show in the image slider.

Description :

You can do an images slider with either using ul and li and the images cone from database. But in this example I  will show you to create an image slider which will get the images from a folder without database, which contains the all images.


Process :

First get the html page, css, javascripts of the slider and part the things according to your project. Create a new project and add the resources (all folders of images, css, javascript).

In the html page your slider is like

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

Now you have to replace these li with the repeater to do it in ASP.

So in the ASP it will be some thing like this.

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

Now you have to bind the image source and title with the images in the code behind. So open the code behind page and in the Page_Load() method write the following code. Before that keep in your mind the all your images are present in a folder named img.

using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.UI; using System.Web.UI.WebControls; using System.IO; namespace Slider_from_folder { public partial class WebForm1 : System.Web.UI.Page { 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(); } } }

From the following code you will get the all images path and images name into the List files. Now you have to bind this in the ASPX page. So open the ASPX page and change with these following code.

<div id="banner-fade"> <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> </div>

Now put some images into img folder and test the project. Enjoy your slider.

Output :

You can download  the fill source code here.

Arkadeep De

asp-arka.blogspot.in

Facebook | LinkedIn | Twitter

If you enjoyed this post, please support the blog below. It's FREE! Get the latest Asp.net, C#.net, VB.NET, jQuery, Plugins & Code Snippets for FREE by subscribing to our Facebook, Twitter, RSS feed, or by email.

Subscribe by RSS Subscribe by Email