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
|
|||
17 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..
This Code is Properly Working
Thank's Suresh ji
How can I add this in an ASP site?
if i want o change the images after a certain interval...how should i do that..plz help...
Is that any idea to insert the new image and display the image in the imageSlider from database in asp.net?
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
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.
A good one boss...!!
Note: Only a member of this blog may post a comment.