Introduction:
Here
I will explain simple jQuery image slideshow with
next previous button options or Simple jQuery image slideshow with
next previous button options example in asp.net.
Description:
In previous articles I explained jQuery Simple Slideshow example, jQuery image slideshow with text overlay, jQuery lightbox image slideshow example and many articles relating to JavaScript, jQuery, asp.net. Now I will explain how to create simple jQuery image slideshow with next previous button options in asp.net.
In previous articles I explained jQuery Simple Slideshow example, jQuery image slideshow with text overlay, jQuery lightbox image slideshow example and many articles relating to JavaScript, jQuery, asp.net. Now I will explain how to create simple jQuery image slideshow with next previous button options in asp.net.
To implement this we need to write the
code like as shown below
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>jQuery
Simple image slideshow with next previous button in Asp.net</title>
<script src="http://code.jquery.com/jquery-1.8.2.js"
type="text/javascript"></script>
<script type="text/javascript">
$(function ()
{
var currentPosition = 0;
var slideWidth = 500;
var slides = $('.slide');
var numberOfSlides = slides.length;
var slideShowInterval;
var speed = 3000;
//Assign a timer, so it will
run periodically
slideShowInterval =
setInterval(changePosition, speed);
slides.wrapAll('<div
id="slidesHolder"></div>')
slides.css({ 'float':
'left'
});
//set #slidesHolder width
equal to the total width of all the slides
$('#slidesHolder').css('width', slideWidth * numberOfSlides);
$('#slideshow').prepend('<span class="nav"
id="leftNav">Move Left</span>')
.append('<span
class="nav" id="rightNav">Move Right</span>');
manageNav(currentPosition);
//tell the buttons what to do
when clicked
$('.nav').bind('click', function
() {
//determine new position
currentPosition = ($(this).attr('id') == 'rightNav')
? currentPosition + 1 : currentPosition - 1;
//hide/show controls
manageNav(currentPosition);
clearInterval(slideShowInterval);
slideShowInterval =
setInterval(changePosition, speed);
moveSlide();
});
function manageNav(position) {
if (position == 0) {
$('#leftNav').hide()
}
else {
$('#leftNav').show()
}
if (position == numberOfSlides - 1) {
$('#rightNav').hide()
}
else { $('#rightNav').show()
}
}
function changePosition() {
if (currentPosition == numberOfSlides - 1) {
currentPosition = 0;
manageNav(currentPosition);
}
else {
currentPosition++;
manageNav(currentPosition);
}
moveSlide();
}
function moveSlide() {
$('#slidesHolder').animate({
'marginLeft': slideWidth *
(-currentPosition) });
};
});
</script>
<style type="text/css">
#slideshow {
position: relative;
}
#slideshow #slideshowWindow
{
height: 257px;
margin: 0;
overflow: hidden;
padding: 0;
position: relative;
width: 500px;
}
#slideshow #slideshowWindow
.slide {
height: 257px;
margin: 0;
padding: 0;
position: relative;
width: 500px;
}
#slideshow #slideshowWindow
.slide .slideText
{
background-image: url("http://www.webchief.co.uk//blog/simple-jquery-slideshow/greyBg.png");
background-repeat: repeat;
color: #FFFFFF;
font-family: Myriad Pro,Arial,Helvetica,sans-serif;
height: 130px;
left: 0;
margin: 0;
padding: 0;
position: absolute;
top: 130px;
width: 100%;
}
#slideshow #slideshowWindow
.slide .slideText
a:link, #slideshow
#slideshowWindow .slide
.slideText a:visited
{
color: #FFFFFF;
text-decoration: none;
}
#slideshow #slideshowWindow
.slide .slideText
h2, #slideshow
#slideshowWindow .slide
.slideText p
{
color: #FFFFFF;
margin: 10px 0 0 10px;
padding: 0;
}
.nav
{
display:block;
text-indent:-10000px;
position:absolute;
cursor:pointer;
}
#leftNav
{
top:223px;
left:320px;
width:94px;
height:34px;
background-image:url(http://www.webchief.co.uk/blog/simple-jquery-slideshow/previous.png);
background-repeat:no-repeat;
z-index:999;
}
#rightNav
{
top:225px;
left:450px;
width:53px;
height:26px;
background-image:url(http://www.webchief.co.uk/blog/simple-jquery-slideshow/next.png);
background-repeat:no-repeat;
z-index:999;
}
</style>
</head>
<body>
<div id="slideshow">
<div id="slideshowWindow">
<div class="slide">
<img src="http://www.webchief.co.uk//blog/simple-jquery-slideshow/slide1.jpg"
/>
<div class="slideText">
<h2 class="slideTitle">Slide
1</h2>
<p class="slideDes">Aspdotnet-Suresh.com
will offer best articles on Asp.net, c#, SQL Server, jQuery and many more
technologies.</p>
<p class="slideLink"><a href="#">click here</a></p>
</div>
</div>
<div class="slide">
<img src="http://www.webchief.co.uk//blog/simple-jquery-slideshow/slide2.jpg"
/>
<div class="slideText">
<h2 class="slideTitle">Slide
2</h2>
<p class="slideDes">Aspdotnet-Suresh.com
will offer best articles on Asp.net, c#, SQL Server, jQuery and many more
technologies.</p>
<p class="slideLink"><a href="#">click here</a></p>
</div>
</div>
<div class="slide">
<img src="http://www.webchief.co.uk//blog/simple-jquery-slideshow/slide3.jpg"
/>
<div class="slideText">
<h2 class="slideTitle">Slide
3</h2>
<p class="slideDes">Aspdotnet-Suresh.com
will offer best articles on Asp.net, c#, SQL Server, jQuery and many more
technologies.</p>
<p class="slideLink"><a href="#">click here</a></p>
</div>
</div>
</div>
</div>
</body>
</html>
|
Live
Demo
For
Live Demo check below slideshow
|
|
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 Email
|
|||
|
|
3 comments :
Hi,
Microsoft visual studio 2012 has stopped working...
this error is getting when i open visual studio, i installed this software 3 months back at that time it is working fine, but 5 days back this error is came, plz help me how to fix this error
plz reply to my email : pravnkumar.net@gmail.com
nice
Hi Suresh,
Iam Rohit im not able to get my slides in asp.net
i have 35,000 images in a URL i need to slide them.. Give a Simple Tip so that that would be a smart work to show..