Slideshow In Jquery And Css3 Tutorial

Slideshow could be implemented in many ways.This tutorial is about how to make an awesome slideshow at the same time in simple steps using jquery and css3.Advantage of using this in your project is you will be knowing the function of each and every line of code in this script, hence you could change it to what ever you like and debug it in your application.Because this slide show is coded in an simpler manner such that even a person with basic jquery knowledge could get it.In this slider you could also display HTML contents or iframe as slides.

A working demo of the slide show.

STEP1:

It is so simple to use in your project.Add the following codes to your project.You will be getting the slide.css,slideshow.js  files when u download the source code of the project.

<script src="http://code.jquery.com/jquery-latest.js"></script>
<link href="css/slider.css" rel="stylesheet" type="text/css" />
<script src="js/slideshow.js"></script>

STEP2:

Basic html code.

<div id="container">
<img src="images/front.png" width="40px;" id="right"/>
<img src="images/back.png" width="40px;"  id="left"/>

<div id="slider">

<div id="slide1" class="slide">
    <a href="#" title="View my first image link"><img src="images/1.png"/></a>
</div>

<div id="slide2" class="slide">
    <a href="#" title="View my second image link"><img src="images/2.png" /></a>
</div>

<div id="slide3" class="slide">
    <a href="#" title="View my first image link"><img src="images/3.png" /></a>
</div>

<div id="slide4" class="slide">			
    <a href="#" title="View my third image link"><img src="images/4.png" /></a>
</div>

<div id="slide5" class="slide">
    <a href="#" title="View my second image link"><img src="images/5.png" /></a>
</div>

</div>

</div>

Any number of images could be added.You dont need to change anything in css or javascript.If you need to add a new image add a new div with id “slide+Nth slide“(ie. if you are adding a sixth image,then you should give a id “slide6“).

<div id="slide6" class="slide">
	// add your content or image.
</div>

Now if you check your project,you will see the slideshow.But still you have to know how it works.

STEP3:

CSS FILE

#slider
{
	overflow:hidden;
	height:200px;
	position:absolute;
	top:20px;
	left:55px;
	border:10px solid #1b1b18;
	padding:0px;
	margin:0px;
	background-color:#adaca5;
	width:600px;
}
#slide1
{
	position:absolute;
	top:0px;
	z-index:1;

}
.slide
{
	position:absolute;
	top:200px;
	-webkit-transition: all 0.3s;
	transition: all 0.3s;

}

#slider overflow is made hidden.And all the .slides position is hidden(because all have its top:200px ,which will not be seen in slider).Only #slide1 is displayed since its top is alone 0px.We define the transition for all slides in css3.

A pictorial representation of whats happeing it is shown below.As you could see we are hiding the images by makeing the slider container overflow to hidden.

STEP4:

Javascript File

var present=1;
var next=2;
$("#right").click(function()
{
			present_slide="#slide"+present;
			next_slide="#slide"+next;
			$(present_slide).css("top","200px");
			$(next_slide).css("top","0px");
			present++;
			next++;
			if(present==(total_slide+1))
			{
				present=1;
				next=2;
				for(i=1;i<=total_slide;i++)
				{
					$("#slide"+i).css("top","200px");
				}
				$("#slide1").css("top","0px");
			}
});

 EXPLANATION:

We are maintaining 2 pointers.One is to point to the present slide and another is to point to the next slide.When ever the right button is clicked , we are moveing the present slide to the bottom of the #slider and bringing the next slider to top.We update the pointer by increamenting it for every click.

Using $(present_slide).css(“top”,”200px”); we could move the present slide below the #slider there by hiding(because #slider overflow is hidden) the presentslide and bringing up the next slide by $(next_slide).css(“top”,”0px”);

var total_slide=document.getElementById("slider").childElementCount;

Total slides you use can be dynamically computed in javascript by finding the no of child nodes of the #slider.

Hope you would have understood how to make a simple slideshow in jquery and css3.Follow my blog for future updates.

 

0saves
If you like this post, contribute us by sharing this in your network

, ,

  • http://www.webtuts.info/webdesigning/jquery-slideshow-tutorial-beginners/933/ Jquery slideshow tutorial for beginners | WEBTUTS

    [...] 1.WEBTUTS: [...]

  • newbie

    thanks!

  • ikala ngita

    Thanks for the code

  • Phyu

    Thanks!

Ver peliculas online