Aspdotnet-Suresh

aspdotnet-suresh offers C#.net articles and tutorials,csharp dot net,asp.net articles and tutorials,VB.NET Articles,Gridview articles,code examples of asp.net 2.0 /3.5,AJAX,SQL Server Articles,examples of .net technologies

Bind an image slider with a folder

Aug 8, 2014
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

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 RSS subscribe by email Subscribe by Email

17 comments :

Unknown said...

plz explain the arrays,strings and deligates in c# and basic program of window application

Gaurav Saini said...

Sir Please Start Tutorials for MVC with angular js ......I Am Looking Foroward To It.

Anonymous said...

nice & very heplful side...

Anonymous said...

bc

Anonymous said...

First of all...Thanks alot man :) You are doing a great job. Keep it up :)

vikas Bhukar said...

U r superb yrrrrrr.....

Anonymous said...

Sorry, this makes no sense at all. Bind with the code behind??

Anonymous said...

Hello. First of all thanks for this solution. Really helpful.

Is it possible to get the files/images ordered by the date they were added to the folder? So that the newest image comes first in the slide?

Regards
Erik

manju said...

Sir i need edit in repeater control,could you please help me.

Unknown said...

This code shows images one by one(in cascade manner). how to solve this error

Unknown said...

sir i want to know how can i increase the width of the image?

Unknown said...

this code not showing image in image control......

Unknown said...

Perfect post....But sir i want to open different live url like www.abc.com on click on image. Please suggest

Unknown said...

hi sir unable to slideshow using asp.net

Anonymous said...

how can we use image slider inside a foreach loop

Zar Antonio said...

how can I set the size of the slider sir?

Zar Antonio said...
This comment has been removed by the author.

Give your Valuable Comments

Note: Only a member of this blog may post a comment.

© 2015 Aspdotnet-Suresh.com. All Rights Reserved.
The content is copyrighted to Suresh Dasari and may not be reproduced on other websites without permission from the owner.