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.
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
|
|
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
|
|||
|
|
10 comments :
nice slideshow! Thanks Suresh!!
Regards,
Jack.
most useful for beginerssss
For each Slide can we use Custom interval???
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.
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.
Thanks Mr.Suresh Kumar Every Person Most Welcome to you always in the future as my chellange
How to create a script file Jquery.js
very nice article..