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
|
|||
6 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..
can you please suggest me a book which covers complete asp .net
In the place of images i am using gridviews, later i am exporting the grids to images using html2canvas jquery function. first grid i am able to see in the canavs, but rest 2 grids not getting correct width. this is may be due to var slidewidth; how can i achieve this to get full width of images to canvas.
Hi, this article is fine
if it comes to last slide, in this particular case if click next it should go to first slide.
At the same time if it comes to first slide if i click previous it should go to last slide.
How can i achieve this.
Note: Only a member of this blog may post a comment.