How to Create Your Own jQuery Content Slider without a plugin

This tutorial will show you how to create your own jQuery content slider. You may ask “Why create my own if there are hundreds of already made sliders out there?” This is true: I myself almost always use ready made plugins for my projects. Yet, it is always a good thing to know how they work. It also comes in handy – if you should ever want to customize it (it’s always harder to edit someone else’s code).
View the Demo
Here’s a preview of what we’re building:
content-slider
So are you ready to get started? Okay, let’s begin:

Step 1: Create the Base Mark Up

What we need is a series of images in an unordered list:

Pretty straightforward code – view it in the browser and see a bunch of images listed from top to bottom.

Step 2: Add jQuery Code to hide unfocused images:

What we’re trying to achieve is to only show the first image of the list and hide the rest. We do this by applying some CSS rules via jQuery to the mark up we’ve created. We also want to line up the hidden images to the right – so we can add controls that animate the entire ul a little bit to the left at a time (see illustration below):
screenshot1
Add the following code right above the closing head tag:

In English: in the first script tag – we have connected to the jQuery library online. Then we go in the window.load() event *as supposed to document.ready() – because of an issue detecting image width and height with webkit browsers. Then we set up a couple of variables which are all the images inside the unordered list, along with their widths. We wrap the unordered list (using the .wrap() function) inside a div called “mother” with the CSS rules I mentioned.

Step 3: Add “Next” and “Previous” Buttons

In our HTML – add anchor tags with the class “next” (If you want to move forward the slider) and “previous” (to go backward) inside the list items:

Note that you will not see these links when you preview the page. This is because they are tucked away outside the visible region of the overflow property we’ve created:

Step 3: The Nifty .Animate()Method

Okay, now we’ve come to the part where we actually see some action. The whole point of what we’re trying to do is to move the list a little to the right – when the “next” link is clicked, and to the left if “previous” is clicked:

Add the following javascript code inside the existing script tags:

Explanation: the code above starts out with the “.each” function – which is essentially a loop that looks for each of our images in the list. Then it finds all of the anchor tags next to the images (through .nextAll) and checks them for the assigned class. If the class says “next” – animate the parent (ul) to the left by applying a margin-left CSS property to it. The same thing goes for class “previous”. The only difference is the index is advanced vs. deducted multiplied by the image width. Lastly – is class “startover” which resets the slider to its original position.
Add the CSS code below inside the “head” tag so you can see the links and start testing them:

Step 4: Make ‘er Nice and Purrty

Technically – our slider is done. This section mainly focuses on making it look nice and presentable. So I grab this file: Slider Constructor from Graphic River. Slider Constructor is a high quality Photoshop filled with shiny slider buttons and controls that will surely bring life to your new slider. Create the buttons of your choice from this file and save them as individual .pngs.

You can set a different button for each anchor tag in each slide. You can also place them anywhere you want with some CSS positioning. Either add an “id” attribute to the individual anchor tags, or an additional class (which is what I did). Below is the CSS for my demo – of course, you might want to code yours differently:

Also – the good thing about this code is you can place and style the buttons individually.

Conclusion

There, there – you’ve just done yourself some good coding Sparky! Feel free to modify, re-factor and make the code better. This is as basic as it gets – so have fun tweaking it. Make sure you leave a comment below.

69 Comments

  1. Great tutorial, really helpful as I’m in the process of designing a new site at the moment – is it possible to have the previous and next buttons separate to the images (so you just have one previous and one next button on a different part of the webpage)?

    Reply
  2. This is brilliant and easy to understand. What if I don’t want the next and previous buttons to be on each page. I want the buttons outside the images. What would the jQuery look like?

    Reply
  3. I have heard that many viewers turn off javascript in their browsers. Is it ok to use JQuery?
    I use SilverStripe CMS because the JavaScript can be run server side.

    Reply
  4. The tutorial that I was looking for. Everybody uses somebody else’s plugin to make a slider but nobody shows how it’s done. This tutorial SHOWS it’s done. Thank you for sharing it with us. Keep up the good work.

    Reply
    • exactly. i’m a total newbie and it’s more important to learn how things work instead of installing a plugin I’m unable to customize.
      great tutorial, thanks so much!

      Reply
  5. It is very interested to look how sliders are built inside. Thank you that you spend time for that tutorial.
    I am interested very much how to create a slider with customized options (for instance, effect: “fade”, “slideDown” or speed: 2000, 5000). Thank you 🙂

    Reply
  6. Thanks a lot for this really easy to understand tutorial!
    I’m just at the beginning of understanding jQuery, but this was really helpful. I wasn’t aware that so few lines of code are already enough to realize a basic content slider.

    Reply
  7. How come the first time it loads all the images it makes a straight
    vertical line with all the pictures while they load? then it goes
    normal? is there a way to stop that and just load them while they are
    hidden? Hit refresh and you’ll see it.
    Thanks

    Reply
    • yes. that’s the caveat of this technique. there are ways to actually align the horizontally via css when the page loads – or preload the images via js beforehand. You just have to do a little research on how to achieve this.

      Reply
  8. Thanks a lot. Trying to see how to avoid the sliding to the extreme left and make it look like a rotation of images. But This is really helpful for a starter like me. Thanks once again

    Reply
  9. why have you used intIndex in function and how are you getting this value.
    I have just start writing my own jquery and try to learn it deeply.
    Thanks

    Reply
    • so intIndex is the number of image in the lineup. So if its the 1st image – its 1, the 2nd – its 2. We use that to multiply with the with – so we can grab the position (in pixels) to slide

      Reply
  10. hi, i’d like to do an infinite loop in my slideshow, i think i can with appendTo to change the first element to the end so it will start again, but because of the slideshow layout (horizontal — float left) whenever i click the last next img so it will jump to the first img in the slideshow, because of it having to destroy the first element to append it after the last one (thus doing the loop) it shifts a bit because of the float left, and the slideshow doesn’t stop in the right place.
    overall this float left (for the imgs in the slideshow) it’s interfering. cause when it has to destroy the first img to put it after the last (for looping purposes) all the imgs get a shift to the left.
    can anyone tell me how can i make things stay in place while having to remove an element with float left?

    Reply
  11. Very helpful tutorial!
    I have it fully functioning now, except I have my images coming in as a variable from Big Cartel so I can’t manually not include the “previous” button on the first image.. Therefore it slides to white space if you press previous on the first image, anything I can do?

    Reply
  12. I’ve spent hours upon hours on this, no syntax errors per DW CS6, but when I open my page to test in Chrome, the slide area appears as a black box. Nothing in it, no slides no previous or next errors. Does not work. I’ve also tried WowSlider and while it works outside my page, does not work when put inside the page. This is my 12th try at a slideshow, can’t understand why everyone else in the world can do it and I can’t make it work at all. Any advice? Thanks…

    Reply
  13. Can i put my next and previous buttons outside of the slider ? I tried but it doesn’t work. What do i need to change to get it working?

    Reply
  14. Is it possible to wrap this code in a setInterval function and auto slide it after set intervals with pauses of certain seconds in between. And once it reaches first slide it should stop sliding after that. Also, if this slide can auto play on page load.

    Reply
  15. I cant get this to work and it is only appearing as the first picture in my slide, no next or previous and when there is a next it is in the top left corner and does nothing

    Reply
    • i believe not. this was written a while back (8/2010), so responsive design was still really new back then, and I haven’t implemented it yet.

      Reply
  16. not that much use.It is difficult to understand for beginners like me.. can you please reduce the code and write it in simple way

    Reply

Leave a Comment.