Example Of Image Slider Using Jquery and asp.net with C#
Defaul.aspx
<%@ Page Language="C#"
AutoEventWireup="true"
CodeFile="imgeslider.aspx.cs"
Inherits="imgeslider"
%>
<!DOCTYPE html PUBLIC
"-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
</script>
<script type="text/javascript">
$(function()
{
var
currentPosition = 0;
var
slideWidth = 500;
var
slides = $('.slide');
var
numberOfSlides = slides.length;
setInterval(changePosition, 3000);
slides.wrapAll('<div id="slidesHolder"></div>');
slides.css({ 'float':
'left' });
$('#slidesHolder').css('width', slideWidth * numberOfSlides);
function
changePosition() {
if
(currentPosition == numberOfSlides - 1) {
currentPosition = 0;
}
else
{
currentPosition++;
}
moveSlide();
}
function
moveSlide() {
$('#slidesHolder').animate({
'marginLeft': slideWidth * (-currentPosition)
});
}
});
</script>
<style type="text/css">
#slideshow #slideshowWindow
{
width:232px;
height:165px;
margin:0;
padding:0;
position:relative;
overflow:hidden;
top: 68px;
left: -32px;
}
#slideshow #slideshowWindow
.slide
{
margin:0;
padding:0;
width:301px;
height:186px;
float:left;
position:relative;
top: -20px;
left: 212px;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div id="slideshow"
style="left:296px; bottom:126px; position: absolute;
background-color:#3399CC; height: 284px; width: 360px;">
<center><div id="slideshowWindow">
<div class="slide" ><img src="images.jpeg"
style="height: 178px; width: 127px; margin-left: 0px;"
/></div>
<div class="slide" ><img src="p_chitambarm.jpeg" /></div>
<div class="slide" ><img src="pranav mistry.jpeg" /></div>
<div class="slide" ><img src="pranav mukharji.jpeg" /></div>
<div class="slide" ><img src="rahul gandhi.jpeg" /></div>
</div>
</div>
</form>
</body>
</html>
Default.aspx.cs
using System;
using
System.Collections.Generic;
using
System.Linq;
using
System.Web;
using
System.Web.UI;
using
System.Web.UI.WebControls;
public partial class imgeslider : System.Web.UI.Page
{
protected void Page_Load(object
sender, EventArgs e)
{
}
}
0 comments :