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

Simple jQuery Image Slideshow Example with Text Overlay

Feb 12, 2013
Introduction

Here I will explain simple jQuery image slideshow example with text overlay or Simple jQuery image slideshow with caption or jQuery image slideshow with content or jQuery image slideshow with links in asp.net.

Description:
  
In previous articles I explained
jQuery Simple Slideshow example, jQuery lightbox image slideshow example, jQuery change textbox background color on focus and many articles relating to JavaScript, jQuery, asp.net. Now I will explain how to create simple jQuery image slideshow example with text overlay 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 Slideshow with text overlay Example 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;
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 {

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;
}
</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

17 comments :

Anonymous said...

nice slideshow! Thanks Suresh!!

Regards,
Jack.

Unknown said...

most useful for beginerssss

baboodinesh said...

For each Slide can we use Custom interval???

Anonymous said...
This comment has been removed by a blog administrator.
Anonymous said...
This comment has been removed by a blog administrator.
Anonymous said...

Thanks for sharing this, just one comment. I suggest to remove the "ASP.NET" on the title. This is not specifically for .net environment and can be used for simple html websites too.

Anonymous said...

Very nice. something I would like to change and do not know how, is the way it goes back to the first image. is there a way to just simply start from the first image a gain. without going back all the way to first image fast?
Thank you.

solanki said...

Thanks Mr.Suresh Kumar Every Person Most Welcome to you always in the future as my chellange

Anonymous said...

How to create a script file Jquery.js

Anonymous said...

very nice article..

Anonymous said...

This Code is Properly Working
Thank's Suresh ji

Vishal Kottarathil said...

How can I add this in an ASP site?

Anonymous said...

if i want o change the images after a certain interval...how should i do that..plz help...

Unknown said...

Is that any idea to insert the new image and display the image in the imageSlider from database in asp.net?

Anonymous said...

how can i slide three images from database simultiously on click button and images are look like shelf and on sliding time second go to first image url ,third go to second,etc like this
pls rply as fast as posible

Anonymous said...

Hi Suresh your tutorials are good , if you concentrate on the UI of your website , your website will be top 10 learning dot net list.

Pratu said...

A good one boss...!!

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.