Slidshow of images or some important contents does not only makes your webpages look good,it also makes your page more dynamic.Getting straight to the point lets create our own content slider using html,css and jquery.
Lets take a look at the final output.Its always a good idea to keep in mind a glimpse of what we are making.So here it is.
This is very simple slider made using html,css and jquery.As we can see in the image above it has a image content at the center and two buttons on its left and right to move forward and reverse.By default the images slide out be their own too.
Getting ready with the images:
We need some images that will be used as the main content,a background image and some button images for forward and reverse.
Get them here.
Now, lets create the html page on which we are going to put all those images.
<!DOCTYPE html>
<head>
<title>Slider</title>
</head>
<body>
<div id="slideshowContainer">
<div id="slideshow">
</div>
</div>
</body>
</html>
This is just simple html5 document with two div's one is "slideshowContainer" that will act as the container of the slider and the other one "slideshow" is the container of the images we are using.
Adding the images are code will be like:
<!DOCTYPE html>
<head>
<title>Slider</title>
</head>
<body>
<div id="slideshowContainer">
<div id="slideshow">
<img src="images/image1.png" width="500" height="600" />
<img src="images/image2.png" width="500" height="600" />
<img src="images/image3.png" width="500" height="600" />
<img src="images/image4.png" width="500" height="600" />
<img src="images/image5.png" width="500" height="600" />
<img src="images/image6.png" width="500" height="600" />
</div>
<ul id="nav">
<li id="prev"><a href="#">Previous</a></li>
<li id="next"><a href="#">Next</a></li>
</ul>
</div>
</body>
</html>
Notice we have added an unordered list just below "slideshow" div.This is just our navigation menu to move the slider forward or reverse.
Our html part is done at this moment.
Now we will include jquery and the plugin called "cycle" to our html page.Download the latest jquery and the cycle plugin and include them in the html using <script> tag.Cycle plugin is a jquery plugin that provides us methods to apply many effects.Check out their page for all the effects reference.
<!DOCTYPE HTML>
<html>
<head>
<title>Slider</title>
<script src="scripts/jquery-2.1.0.js"></script>
<script src="scripts/jquery.cycle.all.js"></script>
</head>
<body>
<div id="slideshowContainer">
<div class="slideshow">
<img src="images/image1.png" width="500" height="600" />
<img src="images/image2.png" width="500" height="600" />
<img src="images/image3.png" width="500" height="600" />
<img src="images/image4.png" width="500" height="600" />
<img src="images/image5.png" width="500" height="600" />
<img src="images/image6.png" width="500" height="600" />
</div>
<ul id="nav">
<li id="prev"><a href="#">Previous</a></li>
<li id="next"><a href="#">Next</a></li>
</ul>
</div>
</body>
</html>
So we have loaded the jquery file in the first script tag and the cycle plugin in the second script tag.
No we need to write our script to bind cycle method to our "slideshow" div.That can be done in two ways either write it in a script tag in the html page itself or create a script file and link it to your html file.We are going to go with the second option i.e. write our script in separate file and then include it in script tag in our html page.Create a new text document and write the following script.
$(document).ready(function(){
$('.slideshow').cycle({
fx: 'fade',
pause: 1,
prev: '#prev',
next: '#next'
});
});
we are targeting our "slideshow" div in our document.ready function if you know jquery then understanding this script will not be hard for you.Now save this text file with .js extension with whatever name you like.I have saved it as myscript.js and placed in inside my scripts folder.To include this script file in our html we'll use the following tag.
<script src="scripts/myscript.js"></script>
So by now our html file looks like this.
<!DOCTYPE HTML>We are almost done here but it doesn't looks like what we expected, right?
<html>
<head>
<title>Slider</title>
<script src="scripts/jquery-2.1.0.js"></script>
<script src="scripts/jquery.cycle.all.js"></script>
<script src="scripts/myscript.js"></script>
</head>
<body>
<div id="slideshowContainer">
<div class="slideshow">
<img src="images/image1.png" width="500" height="600" />
<img src="images/image2.png" width="500" height="600" />
<img src="images/image3.png" width="500" height="600" />
<img src="images/image4.png" width="500" height="600" />
<img src="images/image5.png" width="500" height="600" />
<img src="images/image6.png" width="500" height="600" />
</div>
<ul id="nav">
<li id="prev"><a href="#">Previous</a></li>
<li id="next"><a href="#">Next</a></li>
</ul>
</div>
</body>
</html>
So ,here comes the css in action to save the day.Open a new document and paste the following code in it and save it as style.css .
* {
margin:0px;
padding:0px;
border:0px;
}
body {
background:url(images/background.jpg) repeat-x;
}
#slideshowContainer {
width: 632px;
margin: 100px auto 0 auto;
position:relative;
}
.slideshow {
height: 600px;
}
.slideshow img {
padding: 15px;
border: 1px solid #ccc;
background-color: #eee;
}
#nav {
list-style-type:none;
z-index:150;
}
#nav li a {
display:block;
width:58px;
height:102px;
text-indent:-9999px;
outline:none;
}
#prev a {
background:url(images/left.png);
width:58px;
height:102px;
position:absolute;
top:220px;
right:+700px;
}
#next a {
background:url(images/right.png);
width:58px;
height:102px;
position:absolute;
top:220px;
right:-10px;
}
#next a:hover {
background:url(images/right_over.png);
}
#prev a:hover {
background:url(images/left_over.png);
}
Now let's include this css file in our html page.Add the following code in the <head>tag.
<link rel="stylesheet" href="style.css"/>so this is our final html page.
<!DOCTYPE HTML>
<html>
<head>
<title>Slider</title>
<script src="scripts/jquery-2.1.0.js"></script>
<script src="scripts/jquery.cycle.all.js"></script>
<script src="scripts/myscript.js"></script>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div id="slideshowContainer">
<div class="slideshow">
<img src="images/image1.png" width="500" height="600" />
<img src="images/image2.png" width="500" height="600" />
<img src="images/image3.png" width="500" height="600" />
<img src="images/image4.png" width="500" height="600" />
<img src="images/image5.png" width="500" height="600" />
<img src="images/image6.png" width="500" height="600" />
</div>
<ul id="nav">
<li id="prev"><a href="#">Previous</a></li>
<li id="next"><a href="#">Next</a></li>
</ul>
</div>
</body>
</html>
Get the final product if your want.Get the source files here.
No comments:
Post a Comment