HOW TO MAKE A SIMPLEST (IMAGE) SLIDER USING JQUERY IN 10 EASY STEPS
In this tutorial, I will show you how to make a simple image slider (carousel) using jQuery. I will guide you through the whole process of making the slider starting from the scratch without using any jQuery plugin. You can use this slider for sliding your images or div content as per your requirement.
Simplest Image Slider Image
Click the button below to see Simplest jQuery Slider Demo before we begin this tutorial.
How to make a simplest (image) slider using jQuery in 10 easy steps
Step 1: Make a folder on your desktop, and give it a name. Lets say- “Project”. We will keep all our files inside this folder.
Step 2: To keep the structure organized, make 3 separate folders inside Project -
- js to store all javascript files
- css to store all stylesheet files
- images to store all image files
Step 3: First, Download the latest jQuery file (jquery-1.5.2.min.js) and save the file in js folder. Secondly, Make a blank js file, and name it as “main.js” and place it in js folder.
Step 4: First, download the “reset” css file (reset.css), and place it inside the css folder. Secondly, Make a blank css file, and name it as “main.css” and place it in css folder.
Step 5: Download and place some sample images inside the images folder. We will use these images for making the image slider.
Step 6: Now inside the main Project folder, create a blank html file. Name it as “index.html“. Now you should have a structure similar to this.
Step 7: Write the following lines of code between <head> and </head> tags of “index.html” to include the js files and css files.
<link rel="stylesheet" type="text/css" href="css/reset.css" ><link rel="stylesheet" type="text/css" href="css/main.css" ><script type="text/javascript" src="js/jquery-1.5.2.min.js"></script><script type="text/javascript" src="js/main.js"></script>
Step 8: Write the following code between <body> and </body> tags of index.html
<div class="wrapper"> <div class="visible-area"> <div class="slider"> <a href="#"><img src="images/Chrysanthemum.jpg" width="800" height="300" alt="1"/></a> <a href="#"><img src="images/Desert.jpg" width="800" height="300" alt="2"/></a> <a href="#"><img src="images/Hydrangeas.jpg" width="800" height="300" alt="3"/></a> <a href="#"><img src="images/Jellyfish.jpg" width="800" height="300" alt="4"/></a> </div> </div> <a href="#" class="previous">Previous</a> <a href="#" class="next">Next</a> <div class="clear"></div></div>
Step 9: Write the following code in “main.css” file.
.wrapper { width: 800px; position: relative; margin: 20px auto;}.visible-area { width: 800px; height: 300px; overflow: hidden; position: relative;}.slider { position: absolute; top: 0; left: 0;}.slider img { float: left;}.previous { width: 100px; float: left; color: #fff; height: 30px; margin-top: 10px; background: #f00; line-height: 28px; text-align: center; text-decoration: none; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px;}.next { width: 100px; float: right; color: #fff; height: 30px; margin-top: 10px; background: #f00; line-height: 28px; text-align: center; text-decoration: none; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px;}.clear { clear: both;} What are we doing here ?
Here we are creating a box (div) named as “visible-area” with fixed dimensions (Fixed height and width). As the name suggests, only the content that will come inside the dimension of this box will be visible; and the content that flows out of the bounds of this box will not be visible to anyone. For this reason, we have given the style “overflow: hidden” to this div.
We are creating another box (div) named as “slider”. As the name suggests, this will be the box that will actually slide (left and right) inside the “visible-area” div. Since this box will slide (left and right) inside the “visible-area” div, hence its pretty obvious that the width of this box will be more than its parent div. We have not defined the width of this box in main.css file, because its width will be calculated dynamically using jQuery (which we will see later).
We have 2 anchor tags in our mark up “next” and “previous”. These anchor tags will act as the “next” button and “previous” button respectively. We have given the float property to these anchor tags (which makes them the block level element, which in turn helps us in setting the width and height for the buttons). And in the last clear div is used to clear the float.
And at last, we have a “wrapper” div to wrap everything up in the mark up, and keep everything in the center of the page.
Your actual content (images) will go inside the slider box. All the images are floated left so as to make them all come in one single line. All the images inside “slider” div are assigned an attribute “alt” in ascending order numerically. For example: The first image is given “alt=1″, The second image is given “alt=2″, and so on.
Till here we are done with our markup and styling. Now we have to use the jQuery code (which is infact the most important part) which will bring our slider into life.
Step 10: Write the following code in main.js file (which is inside the js folder).
$(document).ready(function(){ $('.slider img:first').addClass('active'); // Here we are assigning a class "active" to the first image in the "slider" div. var imagewidth = $('.visible-area').width(); // Width of 1 image (should be equal to the width of "visible-area" box) var totalimages = $('.slider img').size(); // Total Number of images inside "slider" div. var sliderwidth = imagewidth * totalimages; // Total width of "slider" div. $('.slider').css({'width': sliderwidth}); // Here we are assigning the width to the slider div (using the css method in jquery) $('.next').click(function(){ // This following function will be executed on click of "next" button $active = $('.slider img.active').next(); // On click of next button, we are saving the image (next to "active" image) in a jQuery variable $active if ($active.length==0){ // If this is the last image inside the "slider" div, and there is no image after that, then go back to the first image in "slider" div and save it in a variable $active. $active = $('.slider img:first'); } $('.slider img').removeClass('active'); // Remove class active from the images inside slider div. $active.addClass('active'); // Add the class active to the $active (next image). var count = $active.attr('alt') -1; var sliderposition = count * imagewidth; // Here we are calculating, how much "slider" div will slide on click of next button, and we are saving it in a variable "sliderposition". $('.slider').animate({'left': -sliderposition}, 500); // Here we are using the jQuery animate method to slide the "slider" div. }); $('.previous').click(function(){ // This following function will be executed on click of "previous" button $active = $('.slider img.active').prev(); // On click of previous button, we are saving the image (previous to "active" image) in a jQuery variable $active. if ($active.length==0){ // If this is the first image inside the "slider" div, and there is no image before that, then go back to the last image in "slider" div and save it in a variable $active. $active = $('.slider img:last'); } $('.slider img').removeClass('active'); // Remove class active from the images inside slider div. $active.addClass('active'); // Add the class active to the $active (next image). var count = $active.attr('alt') -1; var sliderposition = count * imagewidth; // Here we are calculating, how much "slider" div will slide on click of next button, and we are saving it in a variable "sliderposition". $('.slider').animate({'left': -sliderposition}, 500); // Here we are using the jQuery animate method to slide the "slider" div. }); }); That’s it. We are done. Just save your file, and see your image slider come alive. Now you can edit the main.css file to customize it as per your requirement.
Please visit the following link for adding more options (pagination and auto scroll feature) to your slider:
Source : how2designweb[dot]wordpress[dot]com
0 comments:
Post a Comment