Aspdotnet-Suresh

aspdotnet-suresh offers C#.net articles and tutorials,csharp dot net,asp.net articles and tutorials,VB.NET Articles,Gridview articles,code examples of asp.net 2.0 /3.5,AJAX,SQL Server Articles,examples of .net technologies

jQuery Image Slideshow with Next Previous Button Options

Feb 18, 2013
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.

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



Slide 1

Aspdotnet-Suresh.com will offer best articles on Asp.net, c#, SQL Server, jQuery and many more technologies.

Slide 2

Aspdotnet-Suresh.com will offer best articles on Asp.net, c#, SQL Server, jQuery and many more technologies.

Slide 3

Aspdotnet-Suresh.com will offer best articles on Asp.net, c#, SQL Server, jQuery and many more technologies.

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 RSS subscribe by email Subscribe by Email

6 comments :

Unknown said...

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

Anonymous said...

nice

Anonymous said...

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..

Anonymous said...

can you please suggest me a book which covers complete asp .net

kishoredoni said...

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.

kishoredoni said...

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.

Give your Valuable Comments

Note: Only a member of this blog may post a comment.

© 2015 Aspdotnet-Suresh.com. All Rights Reserved.
The content is copyrighted to Suresh Dasari and may not be reproduced on other websites without permission from the owner.