Categories :- Image Slider In asp.net with example
Introduction : -
This is very easy to implement the slider in asp.net .In my previous article i have explained very nice example for implement the slider in asp.net.
Introduction : -
This is very easy to implement the slider in asp.net .In my previous article i have explained very nice example for implement the slider in asp.net.
This is very simple and easy to use slider in our web page. in this post you can adjust the width and height as well as time delay of image
In this article you have to include a one .js file like this
Jquey Function is like this
Complete Source As shown below
In this article you have to include a one .js file like this
<script type="text/javascript" src="Scripts/jquery-1.4.1.js"></script>
Jquey Function is like this
<script type="text/javascript">
$(document).ready(function () {
var currentPosition = 0;
var slideWidth = 600;
var slides = $('.slide');
var numberOfSlides = slides.length;
var slideShowInterval;
var speed = 2000;
slideShowInterval = setInterval(changePosition, speed);
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>
$(document).ready(function () {
var currentPosition = 0;
var slideWidth = 600;
var slides = $('.slide');
var numberOfSlides = slides.length;
var slideShowInterval;
var speed = 2000;
slideShowInterval = setInterval(changePosition, speed);
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>
Complete Source As shown below
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title></title>
<script type="text/javascript" src="Scripts/jquery-1.4.1.js"></script>
<style type="text/css">
#slideshow #slideshowWindow
{
width:512px;
height:200px;
margin:0;
padding:0;
position:relative;
overflow:hidden;
}
#slideshow #slideshowWindow .slide {
margin:0;
padding:0;
width:512px;
height:384px;
float:left;
position:relative;
}
</style>
<script type="text/javascript">
$(document).ready(function () {
var currentPosition = 0;
var slideWidth = 600;
var slides = $('.slide');
var numberOfSlides = slides.length;
var slideShowInterval;
var speed = 2000;
slideShowInterval = setInterval(changePosition, speed);
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>
</head>
<body>
<form id="form1" runat="server">
<center>
<div id="slideshow">
<div id="slideshowWindow">
<div class="slide">
<img src="img/1.jpg" alt="http://dotnetnukes.blogspot.in"/>
</div><!--/slide-->
<div class="slide">
<img src="img/2.jpg" alt="http://dotnetnukes.blogspot.in"/>
</div><!--/slide-->
<div class="slide">
<img src="img/3.jpg" alt="http://dotnetnukes.blogspot.in"/>
</div><!--/slide-->
<div class="slide">
<img src="img/4.jpg" alt="http://dotnetnukes.blogspot.in"/>
</div>
</div>
</div>
</center>
</form>
</body>
</html>
<head id="Head1" runat="server">
<title></title>
<script type="text/javascript" src="Scripts/jquery-1.4.1.js"></script>
<style type="text/css">
#slideshow #slideshowWindow
{
width:512px;
height:200px;
margin:0;
padding:0;
position:relative;
overflow:hidden;
}
#slideshow #slideshowWindow .slide {
margin:0;
padding:0;
width:512px;
height:384px;
float:left;
position:relative;
}
</style>
<script type="text/javascript">
$(document).ready(function () {
var currentPosition = 0;
var slideWidth = 600;
var slides = $('.slide');
var numberOfSlides = slides.length;
var slideShowInterval;
var speed = 2000;
slideShowInterval = setInterval(changePosition, speed);
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>
</head>
<body>
<form id="form1" runat="server">
<center>
<div id="slideshow">
<div id="slideshowWindow">
<div class="slide">
<img src="img/1.jpg" alt="http://dotnetnukes.blogspot.in"/>
</div><!--/slide-->
<div class="slide">
<img src="img/2.jpg" alt="http://dotnetnukes.blogspot.in"/>
</div><!--/slide-->
<div class="slide">
<img src="img/3.jpg" alt="http://dotnetnukes.blogspot.in"/>
</div><!--/slide-->
<div class="slide">
<img src="img/4.jpg" alt="http://dotnetnukes.blogspot.in"/>
</div>
</div>
</div>
</center>
</form>
</body>
</html>
Download sample code attached
