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:
7 Best Tutorials on CSS / HTML
7 Best Tutorials on CSS / HTML
Yesterday, One of my friend asked me to help him find some good tutorial / presentation on basics of HTML and CSS.
While surfing on the internet, I found some very good presentations on HTML and CSS, which covers the basics of Web Designing (HTML / CSS), in a concise, precise, and accurate manner. Though there were many others available but these are the ones I liked the most.
These are the ideal tutorials for the Beginners, Intermediate Users, and Advanced Users of CSS. I personally recommend these tutorials to everyone. I hope you will like them.
CSS3 Gradients for all browsers
What are CSS3 Gradients ?
Well, A Gradient can have many different dictionary meanings, but in terms of Web Design, we can define gradient as “A fill consisting of two or more colors blending together”. So If one color blends with the other color in a straight line, then this is called a simple Linear Gradient.
In earlier days of web design, The gradient effect on a website was possible only with the use of images (A sliced image getting repeated along the x-axis or y-axis). But now, when all the major browsers are in a race to expand their functionality, and support for the CSS3 properties, almost all of them have started providing the support for CSS3 gradient.
None of them have started supporting them fully, but a partial support is provided by most of them including webkit browsers ,gecko browsers, and internet explorer also. Since the partial support is provided by the browsers, we need to use the vendor specific prefix (-moz
for Mozilla Firefox, -webkit
for Webkit browsers) with the CSS3 property. Also all the browsers have a different syntax for this property. We will see that later.
Why use CSS3 Gradients ?
CSS3 gradients are partially supported by the browsers; and on top of that the image technique (A sliced image getting repeated along the x-axis or y-axis) for generating the gradient effect on a website works perfectly well in all the browsers. So the question is why do we care about using the CSS3 gradient property?
Before answering this question, let me tell you that CSS3 gradients fall into a category where you can specify fallbacks (i.e. images) so that browsers that don’t support them just use the image instead. That’s right, so if we use the CSS3 gradient property (with fallback image or background), then the browsers which support the CSS3 gradient will not load the image fallback; which will result in 1 less HTTP request – Thus making your website load faster .
How to use CSS3 Gradients ?
Alright, Now lets come to the point, and see (and understand) how this property is used in different browsers. Gradient is a replacement for an image. So gradient is used with the background-image property.
<style type="text/css">div.testing { background-image: url("images/background-image.png") repeat-x 0 0; /* Fallback Image - For all other browsers not supporting linear gradient property */ background-image: -moz-linear-gradient(top, #0c2f08 0%, #0cff06 100%); /* For Mozilla Firefox */ background-image: -webkit-gradient(linear, left top, left bottom, from(#0c2f08), to(#0cff06)); /* For Webkit browsers */ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0c2f08', endColorstr='#0cff06'); /* For Internet Explorer */}</style> As you can see in the above code snippet, we have used 4 different lines of code. These 4 lines are for different browsers, to make sure that this is supported by all the browsers. We will see and understand the meaning of each line one by one.
The first line in the code is a simple background-image
property. This is actually the traditional way of using the gradients on web pages. This is a fallback property; which means It is supposed to be used by only those browsers that dont support the css3 gradients (like opera).
The second line in the code is used by the gecko browsers like Mozilla Firefox. The picture given below explains the property in detail.
The third line in the code is used by the webkit browsers like Chrome and Safari. The picture given below explains the property in detail.
The third line in the code is used by Internet Explorer. The picture given below explains the property in detail. Internet Explorer gradient filter doesn’t support color-stop, gradient angle, and radial gradient. That means you can only specify either horizontal or vertical linear gradient with 2 colors: StartColorStr and EndColorStr.
The Final Outcome
For more information on CSS3 Linear Gradients, please visit the following links:
How to make rounded corner images using CSS3
How make rounded corner images using CSS3
Rounded corners in Website design has been a trend for a long time. Almost every project involves some or the other kind of rounded corner boxes. Designers and developers have used different techniques for developing rounded corner boxes. Many of these techniques involve css, javascript, jQuery plugins, and images.
Now looking at the extensive use of the rounded corners in Web Design, W3C has also come up with a new property in CSS3, which will make the rounded corners much easier to use and implement. This property is the “border-radius” property. Almost all the major browsers (except Internet Explorer) have started using this property, with their vendor specific prefixes (-moz-border-radius, and -webkit-border-radius). This property is very easy to use; And using this property will give a rounded corner to almost any element in the html document.
Problem: “border-radius” property doesnot work on images
With the use of “border-radius” property, the rounded corners are easily achievable on div tags, spans, and other html elements. Now, the problem is when you use the border-radius with an img element, the border of the image gets rounded, and the image is drawn above the border, so it is not rounded (look at the example below).
To the image displayed above (img tag), we have given the following styles:
<style type="text/css">img{ border: 4px solid #fff; -moz-border-radius: 30px; -webkit-border-radius: 30px; border-radius: 30px;}</style> Here we observe one thing that by giving the “border-radius” property to the <img> tag the borders get rounded, but the image does not. The image flows out of the border.
Solution: The tricky part!!!
To solve this above discussed issue, we should do the following steps:
- Wrap the <img> element with a div tag which should be having the same dimensions (height and weight) as the <img> tag.
- To this wrapping div tag, specify the same original image as the background image.
- To the original image <img> tag, give the property “opacity: 0“.
Now, after following the steps as mentioned above, we have the following html markup:
<div> /* DIV TAG STARTS HERE WITH SAME DIMENSIONS AS IMAGE */ <img src="images/test.jpg" alt="testing" /> /* IMAGE TAG */</div> /* END DIV TAG */
Now, we are going to give the following styles to the img and div tag.
<style type="text/css">div{ width: 550px; /* Width same as the image width */ height: 350px; /* Height same as image height */ background: url("images/test.jpg") no-repeat 0 0; /* Background Image same as the Original image being wrapped by the div tag */ border: 4px solid #fff; -moz-border-radius: 30px; -webkit-border-radius: 30px; border-radius: 30px;}img{ opacity: 0; /* Hide the original image being wrapped by the div tag */}</style> The Final Result
After giving the above mentioned markup, and the styles, we will achieve that looks something like this:
Wallpapers (Funny Animals)
Source : how2designweb[dot]wordpress[dot]com
0 comments:
Post a Comment