Hi,
There are so many methods to create Slid show functionality in asp.net,
But one of the easiest method to create Slid Show is using JavaScript and CSS.
Step1: Create a Image folder in Solution Explorer and keep some Images there.
Step2: Include this Css and Javascript Code in .aspx page Like this
<%@ Page Title=”Home Page” Language=”C#” MasterPageFile=”~/Site.master” AutoEventWireup=”true”
CodeFile=”Default.aspx.cs” Inherits=”_Default” %>
<asp:Content ID=”HeaderContent” runat=”server” ContentPlaceHolderID=”HeadContent”>
</asp:Content>
<asp:Content ID=”BodyContent” runat=”server” ContentPlaceHolderID=”MainContent”>
<div style=”margin-left:200px;”><h1>Repeater Slide Show</h1></div>
<style type=”text/css”>
.photo
{
width:400px;
margin-left:200px;
margin-top:40px;
background-color:white;
filter:progid:DXImageTransform.Microsoft.Fade(duration=2);
}
</style>
<script type=”text/javascript”>
var photos = new Array();
window.setInterval(showImage, 5000);
function showImage() {
if (photos.length > 0) {
var index = Math.floor(Math.random() * photos.length);
var image = document.getElementById(‘imgPhoto’);
image.src = photos[index];
if (image.filters) {
image.filters[0].Apply();
image.filters[0].Play();
}
}
}
</script>
<img id=”imgPhoto” alt=”” />
<script type=”text/javascript”>
<asp:Repeater
id=”rptPhotos”
Runat=”server”>
<ItemTemplate>
<%# Eval(“Name”, “photos.push(‘Photo/{0}’)”) %>
</ItemTemplate>
</asp:Repeater>
showImage();
</script>
</asp:Content>
Step3: Write this code in Code behind file
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.IO;
public partial class _Default : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
if (!Page.IsPostBack)
{
DirectoryInfo dir = new DirectoryInfo(MapPath(“~/Photo”));
rptPhotos.DataSource = dir.GetFiles(“*.jpg”);
rptPhotos.DataBind();
}
}
}
Then you will get output like this
Chandradev's Blog 