The Anatomy of Sliders and Scrollers

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.

The Anatomy of the Basic Slider or Scroller

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:

• The first is its width. We know point A in our figure is going to be considered zero but it is important to know what point D is going to be. The reason is that when one of our slides eventually slides or scrolls off the screen to the left (that is point B2 is left of point A), we know the slide is completely off the screen and can be reset just to the right of either point D or point E (I will talk about how to know which one to start at in a moment).
• The second key piece of information is that the container is set to have a position of ‘relative’ (See figure 2 below). The reason that it should be set to relative positioning is that each slide will eventually be set to have an absolute positioning. This will mean we can change the slide’s location in relation to the top left corner of the container. Without this property set each slide would be set according to the upper left corner of the containers parent or the page. The slides would then float on top of the container instead of in the container. In the figure below point B is going to move in relation to point A. This concept is important, giving us the option to move slides however we like.

  

• The third key piece is that the container has the style of overflow set as hidden. This means that if any of our slides have a piece which extends beyond the borders of our container element then hide them. If they are not in the viewable “window” then you should not see them. This is why slide 4 on figure 1 is be partially grayed out… it is simply not seen.

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.

Questions About Altering the Scroller’s Behavior

• What if you have less slides than the width of the container but still want them to be scrolling one after the other with no gap? Well we talked about slides popping into view. One way to combat this would be to simply repeat all the slides until their total width is greater than the width of the container. Meaning double the number of slides even if two slides have the same info/graphic on it.
• What do you need to change to have it change direction and scroll right? Reverse the logic. Setup each slide’s right edge with the right edge of the container or the left edge of the slide before it. Eventually your slides will be setup off the left side of the container (have a left CSS position in the negative). Then for each move you increment the left edge of each slide. Once point B1 is to the right of point D you know the slide is off the stage. You can then reposition its right edge at point A (if you don’t have enough slides) or at the left edge of the farthest slide to the left.
• How do you increase / decrease the speed? In the fiddle code you will see a setInterval() call which calls our function to move the slides. “35” represents the speed, in milliseconds. You can lower that number to make it faster or increase it to make it slower. I find that 35 milliseconds seems adequate to give a nice scrolling effect.
• I can see the slides but some of the slides are not the same size as the others and thus are cut off. What can I do to fix this? You can do one of two things. You can adjust the size of the container or you can resize all the images/content on each slide to be the same height and that fits within the bounds of the container. Some plugins you may run across have a feature for resizing the slides to fit the dimensions. Some just have the slides themselves hide the overflow and thus clip images. It is up to you on how you adjust the sizing of each slide and its contents.

What about Sliders?

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.

Questions About Altering Slider Behavior

• How do I add one of those series of buttons or dots to quickly jump to a slide? Those items do nothing more than locate the given slide and tell all slides to slide far enough (left or right) to then show that slide. To help you figure out where everything is placed, think about the position of all slides when the target slide is set in the viewable area. When slide 4 has its left edge at point A in figure 1, where is the left edge of each of the other slides. At the end of your jump all those slides should be at those positions and when the next slide happens it can happen as normal. I know you may or not remember this, but think of the slides like a cassette tape. When you fast forward or rewind. They all stay in order, you just zip past them.
• Some sliders I have seen have a transition effect. For instance if slide 1 is sliding off the “stage” it also fades out. How do I do that? That is just part of the animation. Before sliding all the slides left, start an animation that adjusts the opacity of the slide coming off stage and then slide all the slides. Just remember that the slide will then be invisible so when you reset it on the right side you change its opacity back before it goes on stage. Otherwise you will never see it come back.
• You show scrolling and sliding left, can you go top to bottom or bottom to top as well? Yes! Because of the technique shown in figure 2 we can virtually adjust those slides any way we want in relation to the container. For instance, we can position them above the container (by adjusting its “top” CSS property) and then animate it down. We could have the slides come in at an angle as well and leave on an angle. It is all about how you manipulate the slide’s top left coordinate.

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.

Slider and Scroller Reference Sites

• Best jQuery Image Slider Plugins
• 20 Awesome jQuery Sliders
• 11 Fresh Responsive jQuery Content Sliders
• 35 Amazing Responsive Jquery Sliders

And if you are looking for that next app, be sure to check out our ebook of 200 programming projects.

Thanks for reading! 🙂