Everywhere you go on the web you see some sort of slider or scrolling widget on the page. You see a lot of them on blogs advertising the latest posts, you see them on event pages showing shots of the audience and speakers and you even see them on software company homepages showing screenshots of the their latest software release. Sure you can get a ton of different ones from the WordPress plugin directory, or by shopping around different widget company websites, but how hard is it to make one? In this article we will attempt to show the anatomy of these types of sliders and scrollers. We will use a little bit of jQuery to make the process even easier and even provide a couple demo fiddles to let you play around with the concepts. At the end we will provide some places to get professional sliders if you just want to skip the work.
Today you can get sliders and scrollers which are chock-full of features like direction selection, transition effects and automatic image resizing. In this anatomy discussion we will boil all that away and get you up and running with the basic concepts needed to get the thing working, then answer some basic questions to sticking points and how you might alter things for different effects. Let’s start with a figure showing a container div containing four slides. We will reference this figure and its various points.
In the figure above you see the container which contains four slides labeled “Slide 1” through “Slide 4”. This container is going to be our window into what the user would see on their screen. You will notice that slide 4 is only partially seen and the section which is grayed out is not going to be seen by the user yet. This container has some special styling on it that will help us manipulate the slides within it. These slides could be div elements, they could be images (like in our example) or could even be span elements. As long as the slide is, or styled to be, a block element it should work with this setup.
The container element has three key pieces of styling to it which makes this thing work:
When you mix these three pieces of information together you create a stage that your slides can dance around on. In our first example fiddle we show three images setup to be single file. They start off on the right side of the stage and slowly march left towards point A (in figure 1). Because each slide is set to be positioned absolutely, we can set their left properties to start just to the right of point D and then decrement their left style property value by 1 which inches them left.
Now returning to my comment about where to start each slide, point D or point E in figure 1, this will depend on the number of slides you have and their total cumulative width of all slides. Let’s say you have a container which is 1000px wide. You have three slides which are 100px wide. As the three slides march out in front of the window, you will end up seeing all three slides before slide 1 reaches the far left edge of the container. As slide 1 comes completely off the stage, it would make sense to start point B1 over at point D; the far right edge of the container. If we had started it at point E, following the last slide, the image would suddenly pop into view in the middle of the window (where point E currently is at the moment). You may or may not want images suddenly popping up in view, but chances are that you want them to gracefully take the stage as before.
Let’s assume now that you have 12 slides of 100px in width. That is 1200px total cumulative width. As slide 1 slowly rolls out of view, we wouldn’t want to have it start at point D because slide 11 is just coming on stage. This would place the slide right on top of slide 11 and screw it up. Instead we want slide 1 to follow slide 12 which hasn’t even made it on stage yet. For this situation we start at point E in our figure (after slide 12 in our hypothetical situation). This means that if we don’t know how many slides we will have and what their widths are, we will have to calculate the total width of all slides (including their borders, padding and margins) and make sure that each slide scrolling off the stage starts at either point D (if the total width is less than the width of the container) or at point E (if the total width is greater than the width of the container).
As you can see we are simply creating a roll around type effect as we move slides left. When they go off the left side, we again position them to the appropriate point on the right side.
Note: For the fiddle that relates to this example refer to this fiddle located here.
At the heart of a slider is a transition effect on the scroller anatomy. Instead of inching each slide 1 pixel at a time in a direction, they take each slide, position it just off stage of our container and with a jQuery animation() effect adjust the slide’s CSS left property from point D to point A (when sliding to the left) or adjust the slide’s left side to point A (when sliding to the right).
When it comes to the anatomy of these sliders and scrollers the main key ideas here is that we have a container which clips everything outside of its boundaries. This forms the “window” which we see slides through. Then you manipulate the position of slides to slowly move towards a direction (scrollers) or to quickly slide in from a direction to a place in the container and then slide out of view (sliders).
To see this effect check out the code in our second fiddle. As you will notice, the code is very very similar. The only differences here are the introduction of a jQuery animation effect and a few modifications to the width of the container and the naming of the function from scrollLeft to slideLeft. The rest is virtually the same. We kept this fiddle, and the previous one, very very basic so that you can see this effect in action and easily see the logic of how it works.
Well I hope you enjoyed this blog entry talking about sliders and scrollers. Hopefully we gave you enough info and insight into the anatomy of how these widgets work to start building your own on your blog or website. Feel free to use the code provided in the fiddles as you see fit. If you come up with an interesting implementation, let us know. Show off what you have done with a link below in the comments. We look forward to seeing what you come up with. Below we have put a list of professional sliders and scrollers in case you just want to jump the anatomy lesson and get some professional ones going.
And if you are looking for that next app, be sure to check out our ebook of 200 programming projects.
Thanks for reading! 🙂