Lets learn Web Designing

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

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 -

  1. js to store all javascript files
  2. css to store all stylesheet files
  3. 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.

File Structure

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.

Visible Area– height: 300px; width: 800px; overflow: hidden;
Slider– height: 300px; width: (Generated Dynamically)

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:


About these ads

55 responses

  1. 2-2

    Hi VIKRAM,
    I’s a Very Nice Tutorials…………Thanx for Shearing..
    I need one help like how to show the images in a cycle.
    eg:img1-img1-img3-img4-img1-img2…so on…

    Regards,
    2-2

    October 31, 2011 at 4:07 pm

  2. Naresh Dwivedi

    Hello Vikram, u have provided a link for downloading reset.css file, but that link is not actually working.. please update the link

    thanks

    March 23, 2012 at 10:25 pm

  3. Anonymous

    Hi Vikram, ur reset.cs link is not downloaded plz upload this file again.

    April 2, 2012 at 3:33 pm

  4. Pingback: HOW TO MAKE A SIMPLEST (IMAGE) SLIDER USING JQUERY IN 10 EASY STEPS How to make a simplest (image) slider using jQuery in 10 easy steps What are we doing here ? « CSS Tips

  5. Anonymous

    Hi Vikram, ur none of your links are working for example : reset.cs link is not downloaded plz upload this file again.

    May 2, 2012 at 2:43 pm

  6. Pingback: HOW TO MAKE A SIMPLEST (IMAGE) SLIDER USING JQUERY IN 10 EASY STEPS How to make a simplest (image) slider using jQuery in 10 easy steps What are we doing here ? 7 Best Tutorials on CSS / HTML 7 Best Tutorials on CSS / HTML CSS3 Gradients for all browse

  7. Anonymous

    your reset.css link is not downoaded

    November 16, 2012 at 12:41 pm

  8. Nitika

    hey vikram,your reset.css link is not working, please check it & update it….

    January 4, 2013 at 6:25 pm

    • randi… hai tu..

      April 10, 2013 at 4:05 pm

  9. What’s up, I desire to subscribe for this weblog to obtain hottest updates, therefore where can i do it please help.

    April 9, 2013 at 6:15 am

  10. Anonymous

    Hi I am srinivas it not working properly when i click on left button it going directly end

    April 11, 2013 at 6:56 pm

  11. shagun justa

    hey vikram,your reset.css file is not working ..plz reload again..
    thanks

    May 16, 2013 at 1:08 pm

  12. This article is in fact a good one it helps new web people, who are wishing for blogging.

    June 21, 2013 at 7:41 am

  13. Hi mates, how is the whole thing, and what you would like to say regarding this post, in
    my view its really amazing for me.

    June 22, 2013 at 6:59 pm

  14. Oh my goodness! Amazing article dude! Thank you so much, However I
    am having issues with your RSS. I don’t know why I can’t subscribe
    to it. Is there anybody getting the same RSS issues?
    Anybody who knows the answer will you kindly respond? Thanks!
    !

    June 23, 2013 at 2:47 am

  15. Howdy just wanted to give you a quick heads up.

    The words in your post seem to be running off the screen
    in Internet explorer. I’m not sure if this is a formatting issue or something to do with browser compatibility but I figured I’d post to let you know.
    The design look great though! Hope you get the issue
    solved soon. Kudos

    June 23, 2013 at 7:23 am

  16. I must thank you for the efforts you have put in penning this website.
    I’m hoping to check out the same high-grade blog posts by you later on as well. In fact, your creative writing abilities has motivated me to get my own blog now ;)

    June 23, 2013 at 10:16 pm

  17. Howdy just wanted to give you a quick heads up and let you
    know a few of the pictures aren’t loading correctly. I’m not sure why but I
    think its a linking issue. I’ve tried it in two different browsers and both show the same outcome.

    June 25, 2013 at 11:28 am

  18. Your style is really unique in comparison to other people I have
    read stuff from. Thank you for posting when
    you have the opportunity, Guess I’ll just book mark this site.

    June 25, 2013 at 11:34 am

  19. Way cool! Some extremely valid points! I appreciate you writing this post and the rest of the website is
    extremely good.

    June 25, 2013 at 11:36 am

  20. After I originally left a comment I appear to have clicked
    on the -Notify me when new comments are added- checkbox
    and from now on each time a comment is added I recieve four emails
    with the exact same comment. There has to be
    an easy method you are able to remove me from that service?
    Cheers!

    June 26, 2013 at 2:57 am

  21. Hi my family member! I want to say that this post is
    awesome, nice written and include approximately all important infos.

    I would like to peer extra posts like this .

    June 26, 2013 at 7:15 am

  22. The only job is usually gamble around the amount or maybe token of your respective alternative, then your supplier will whirl the particular controls
    along with the quantity the idea ceases about will be
    the range which wins. Another example comes from Europa Miami Club Casino.

    June 28, 2013 at 12:57 am

  23. It is actually a great and useful piece of information. I’m satisfied that you simply shared this useful information with us. Please stay us informed like this. Thanks for sharing.

    June 28, 2013 at 6:58 am

  24. One particular issues should cope with your
    hard earned dollars limits and also the sorts of box24 casino online
    Slots in which you’re interested in, your capacity to pay, your current games quality and who’re
    the best competitors (amateur or perhaps knowledgeable players) as well as this
    reliability in addition to strength of the box24 casino online Slots bedroom.
    Do you know what After all, this dealership will
    be busting eventually left and also appropriate, I am just attracting five-card 21s, as well as
    the pile regarding potato chips facing me personally gets even larger in
    addition to greater.

    July 1, 2013 at 3:18 am

  25. Greate post. Keep writing such kind of information on your page.

    Im really impressed by your site.
    Hi there, You have performed an incredible
    job. I will certainly digg it and for my part recommend to my friends.
    I am sure they’ll be benefited from this website.

    July 1, 2013 at 4:32 am

  26. Hi

    I am not sure i realized fully what you meant with that, is it possible to develop much more about vegan cosmetics ?

    Regards

    July 2, 2013 at 5:50 am

  27. This guy gamble $10 a new rotate, and also he / she profited $90 for each 35 moves with the
    wheel over time (a $350 gain minus twenty six
    losing craps bets connected with $10 each). Most of us exactly who participate in frequently in online Grand Parker might consent
    how the on the internet check process which in turn a player prefers will
    make or maybe separate the overall game.

    July 2, 2013 at 10:10 am

  28. My brother suggested I might like this blog. He was entirely right.
    This post actually made my day. You can not imagine just
    how much time I had spent for this info! Thanks!

    July 2, 2013 at 8:52 pm

  29. Hi there, You’ve done a great job. I will certainly digg it and personally recommend to my friends. I’m sure they’ll be benefited from this site.

    July 3, 2013 at 3:18 am

  30. As in almost any level of Slotocash online Slots, commencing hands variety is usually crucial.

    In reality, it may be one of the best ways for newcomers given
    it provides newbie the ability to know the actual values of the credit cards ahead of these people get involved with a lot more complex online games such as Slotocash online
    Slots in addition to blackjack.

    July 6, 2013 at 11:18 am

  31. Howdy! I know this is kinda off topic but I’d figured I’d ask.
    Would you be interested in trading links or maybe
    guest authoring a blog post or vice-versa? My blog covers a
    lot of the same subjects as yours and I feel we could
    greatly benefit from each other. If you’re interested feel free to send me an e-mail. I look forward to hearing from you! Fantastic blog by the way!

    July 9, 2013 at 2:12 am

  32. I have learn a few just right stuff here. Certainly value bookmarking for
    revisiting. I surprise how much attempt you place to make one of these
    magnificent informative site.

    July 10, 2013 at 9:36 am

  33. Hey! Quick question that’s completely off topic. Do you know how to make your site mobile friendly? My blog looks weird when viewing from my iphone. I’m trying
    to find a template or plugin that might be able to resolve
    this problem. If you have any recommendations, please share.
    Appreciate it!

    July 11, 2013 at 4:36 am

  34. Spot on with this write-up, I honestly believe that this web site needs a lot more attention.

    I’ll probably be back again to read through more, thanks for the advice!

    July 14, 2013 at 3:50 am

  35. Thank you for any other fantastic post. Where else may anyone get that
    kind of information in such an ideal means of writing?
    I have a presentation next week, and I am on the search for such info.

    July 15, 2013 at 10:28 pm

  36. Wonderful, what a blog it is! This web site presents useful
    data to us, keep it up.

    July 19, 2013 at 11:33 am

  37. Hi, the whole thing is going perfectly here and ofcourse every one is
    sharing data, that’s really fine, keep up writing.

    July 22, 2013 at 8:30 am

  38. Copyright Infringement Laws – Torrents themselves aren’t banned, because there’s probably some legitimate belongings you can download with them.
    Moreover, it really is not the previous, stale and tough
    lobsters that you will be getting. The Tor software is contained in the Vidalia program.

    July 22, 2013 at 8:25 pm

  39. Hi! This post couldn’t be written any better! Reading this post reminds me of my old room mate! He always kept chatting about this. I will forward this article to him. Pretty sure he will have a good read. Thank you for sharing!

    July 24, 2013 at 12:28 pm

  40. It’s really a nice and helpful piece of info. I am happy that you simply shared this useful info with us. Please keep us up to date like this. Thank you for sharing.

    July 30, 2013 at 7:39 pm

  41. Currently it appears like Expression Engine is the best blogging platform out there right
    now. (from what I’ve read) Is that what you are using on your blog?

    July 31, 2013 at 1:32 pm

  42. Its not my first time to visit this site, i am visiting this web site
    dailly and get nice information from here all the
    time.

    August 3, 2013 at 2:27 am

  43. It’s very effortless to find out any matter on web as compared to books, as I found this post at this web page.

    August 6, 2013 at 6:33 am

  44. It’s a pity you don’t have a donate button! I’d definitely donate to this brilliant blog! I guess for now i’ll settle for bookmarking
    and adding your RSS feed to my Google account. I look forward to new updates and will share this
    site with my Facebook group. Chat soon!

    August 8, 2013 at 1:13 am

  45. Hi there! This really is relatively off the subject matter although I
    need some aid from an experienced blog writer.
    Would you say that it can be tough to set up your own site?
    I’m not especially techincal but I should be able to figure problems out surprisingly quick. I have been intending on establishing my own, although I’m just unsure the place to start.
    Might you have any tips or suggestions? Loads of thanks….
    ! Might you use Twitter? I wish to follow you
    if this is acceptable. I have without doubt enjoyed your site am looking forward to any
    new posts.

    August 8, 2013 at 6:00 am

  46. Hello there guys, I am somewhat of a watch addict.
    Hey, how are you? I was reading this piece of writing and so I definitely
    liked it. There is a number of very excellent tips for me to process.
    I have got to express, I’ve been lonesome just lately as my bro is no longer here with me. Scouting around web pages gives me a tiny piece of mind though. I’d personally choose to thank you for this wonderful on line article which probably helps to send out the
    news with regard to watches even more! I personally was curious as to if you provide
    an email listing so I could keep current on this site.

    August 10, 2013 at 11:28 pm

  47. I was very happy to uncover this page. I want to to thank you for ones time for this particularly fantastic read!!
    I definitely loved every part of it and I have you book-marked to check out
    new information in your web site.

    August 11, 2013 at 4:48 am

  48. hello friends
    i am unable download reset.css
    can u help in finding it….
    when i click on the given link it is showing some error….
    thanks in advance

    October 4, 2013 at 10:35 am

  49. It’s in reality a great and helpful piece of info.

    I’m happy that you simply shared this helpful info with us.

    Please stay us informed like this. Thank you for sharing.

    October 27, 2013 at 2:35 pm

  50. Thanks for this easy steps. But hey they “reset.css” is not working. Please fix it. :) Thanks!

    October 27, 2013 at 10:33 pm

  51. Gay

    I absolutely love your site.. Very nice colors & theme.
    Did you create this amazing site yourself?
    Please reply back as I’m attempting to create my own site and would love to find out where you got this
    from or just what the theme is named. Kudos!

    January 18, 2014 at 3:49 pm

  52. I will immediately grab your rss feed as I can’t
    to find your email subscription link or newsletter service.

    Do you have any? Please let me realize so that I could subscribe.
    Thanks.

    February 27, 2014 at 1:32 am

  53. Does your blog have a contact page? I\’m having a tough time locating it but, I\’d
    like to shoot you an e-mail. I\’ve got some recommendations for your blog you might be interested in hearing.

    Either way, great site and I look forward to seeing it grow
    over time.

    June 28, 2014 at 9:52 am

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Follow

Get every new post delivered to your Inbox.