how to make a slider in asp.net

I have few images in folder which i want to display as slider dynamically on website.  If I add or remove the images from folder the slider should display automatically.

I want to write this in java script or asp.net.
Bharat GuruAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Shaikh MubeenSenior Software, Web & Mobile Apps DeveloperCommented:
You can create the slider using any jquery slider plugin, but to demonstrate I am using  Basic jQuery Slider plugin can be download from Basic Jquery Slider

Plugin usage:

There are two core files required to get up and running with Basic jQuery Slider, the JavaScript plugin and the base css. The only dependancy is jQuery, so you will also need to make sure you have the latest version of the jQuery library included in your page like below.

<!-- Include the jQuery library (local or CDN) -->
<script src="http://code.jquery.com/jquery-latest.min.js"></script>

<!-- Include the plugin *after* the jQuery library -->
<script src="bjqs.min.js"></script>

<!-- Include the basic styles -->
<link type="text/css" rel="Stylesheet" href="bjqs.css" />

Open in new window


Markup required by the plugin:

The basic markup for the plugin is as follows.

An outer container which the plugin will be attached to,
An unordered list element with a class name of bjqs, and
Individual list elements for each slide.


<div id="my-slideshow">
	<ul class="bjqs">
		<li><!-- We need to replace this li content --></li>
	</ul>
</div>

Open in new window



The final step is to invoke the plugin and attach it to the outer-most dom element. You can then pass in a variety of key : value pairs to configure the slider.

jQuery(document).ready(function($) {
	$('#banner-fade').bjqs({
		'height' : 320,
		'width' : 620,
		'responsive' : true
	});
});

Open in new window



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

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

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

Open in new window



Below lines of code will get all the images located in the given folder, i am using "img" frolder which is located in root of the asp.net application.

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

Open in new window


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

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

Open in new window

0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Manoj PatilSr. Software EngineerCommented:
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>

Open in new window



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>

Open in new window


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

Open in new window


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>

Open in new window



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

For more Clarity and Sample Code of this, Check below URL
http://www.aspdotnet-suresh.com/2014/08/bind-image-slider-with-folder-asp-net-c-sharp.html
0
Bharat GuruAuthor Commented:
Thanks
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
.NET Programming

From novice to tech pro — start learning today.