How to Make a Graphical News Slider in jQuery

Preface

This tutorial was written in 2010 using jQuery 1.4.2. It supports Internet Explorer 6 and still functions the same to this day in modern browsers, as evidenced by the live demo above. Some of the coding examples put forth in the coming sections may not seem optimal, and you’re right. They do not make use of such technologies as flex boxes, alpha-opacity, or box-sizing. These simply did not exist at the time. However, as a result, this tutorial is backwards compatible by more than a decade. While I would no longer recommend a lot of these practices, there is no need to re-invent the wheel. The product in this tutorial is in working order and a rewrite would achieve nothing more than sacrificing backwards compatibility.

The HTML

Since the algorithms are dependent on the DOM structure, this will be a good place to start:

The CSS

Now that you know what the elements are, we must set their default styles to position them appropriately!

  1. Add the padding (10) to include the additional padding at the bottom of the navigation bar: 50. If you have 4 images, you’ll want 10px above the first image (10), 10px above the second image (20), 10px above the third image (30), 10px above the fourth image (40), and 10px below the fourth image (50).That comes out to be 50 pixels of the total 300 height that will be dedicated to padding.
  2. Multiply the border width (2) of the images by 2: 4.If you have a border width of 2, that’s 2px on the border top and 2px on the border bottom. That comes out to be 4px total added to the vertical height of the image.
  3. Multiply that number (4) by the number of images (4): 16.
  4. Subtract that number (16) and the total padding (50) from the height (300): 234.This is how much of your navigation bar is not border or padding. This is how much of your navigation bar can actually be used for images.
  5. Divide that number (234) by the number of images (4): 58.5.
  6. Round that number (58.5) if necessary: 58. This is the height of each individual image. The width of each image can be calculated using the height-to-width ratio of the original image and this new height.

The Object and Important Variables

The news slider is placed in an object instead of a function. It requires at least two variables — one function to create the slider and one array to keep track of the timeouts used in changing slides. By using an object, we can store both of these in a single variable, while allowing the extensibility of storing other variables in the object for convenience.

The Call

Before we can create newsSlider.create, we need to know what we’re working with. What is a simple interface for the developer to manipulate? How many variables with which will we be working, and what will they be called? To figure out this information, I’ve added the call prior to the final bit of code: newsSlider.create.

Creating and Styling the Elements

Now we will tackle the foundation of the newsSlider.create function, albeit not the important algorithms yet. This section will cover the creation of variables that need to be set with JavaScript, the creation of the elements, the style of the elements that can only be calculated with JavaScript, and establishing the final event listener. The following code snippets go inside create: function(data) { }.

Changing Slides Event Listener

To finish the code, we need to populate the click bind for div.navigation img. I’ll separate this into three parts: the fade algorithm, the slide algorithm, and everything else. The “everything else” is basic CSS calculations and setting timeouts and as such will be discussed first.

The Fade Algorithm

The fade algorithm is very simple, since there is only one way to fade and eight ways to “slide.”

  1. div.text needs to fade back in. It faded out before the slides transitioned; now that the slide has finished transitioning, it should fade back in.
  2. Once the text has faded back in, we can safely remove the .animating class from the slider.

The Slide Algorithm

The slide algorithm shall take place in the else conditional of the aforementioned if (effect == "fade") { }. I decided that each animation should take place every 10 milliseconds. Generally, 20 milliseconds is fast enough to be seamless to the eye, but I did happen to notice some choppiness, so I upped it to every 10 milliseconds. That is, every 10 milliseconds, the new background will reposition closer to its final position in the middle of the slider. Since it will take 2,000 milliseconds to complete the slide (arbitrary time that I also used in the fade transition), and there will be one animation every 10 milliseconds, that makes for 200 animations – 200 repositions of the background.

The Diagonal Algorithm

  • .find("div.background") tells it to get the newly-created slide, so that we can position it closer to the center of the slider.
  • .css("background-position", "..."); is the reposition algorithm that moves it closer with each step.
  • (direction.match(/left/) ? width - shift.horizontal : shift.horizontal - width) constitutes the horizontal position of the background. If the direction of the slide is to move to the left, then set the new position to the width minus the horizontal shift. The position is going to start at the far right side, and for every step, it will move to the left. If the direction of the slide is to move to the right, then set the new position to the horizontal shift minus the width. An easier way to think of this may be -width + shift.horizontal. The start position is negative the width, so that it cannot be seen, and each step moves it further to the right.
  • (direction.match(/top/) ? height - shift.vertical : shift.vertical - height)constitutes the vertical position of the background.The algorithm is essentially the same as the horizontal algorithm.

The Horizontal and Vertical Algorithm

Unlike the diagonal algorithm, in which the new slide covers the old slide, the horizontal and vertical algorithm will have the two slides connected. In single-direction animations, the new slide gives the appearance as though it’s “pushing” the old slide out of view. This cannot be elegantly done in a diagonal slide, thus the new slide merely covers the old one in the diagonal algorithm. If you do not know the difference between the two animation types, watch them animate in the live demo linked at the top of this article.

  1. (direction == "left" ? '-' + shift.horizontal + 'px' : (direction == "right" ? shift.horizontal + 'px' : '0'))If the direction to slide is left, move the old slide shift.horizontal pixels to the left.If the direction to slide is right, move the old side shift.horizontalpixels to the right.If the direction is neither left or right (i.e. top or bottom), don’t move it in any horizontal direction (0 pixels).
  2. (direction == "top" ? '-' + shift.vertical + 'px' : (direction == "bottom" ? shift.vertical + 'px' : '0'))If the direction to slide is top, move the old slide shift.verticalpixels to the top.If the direction to slide is bottom, move the old slide shift.vertical pixels to the bottom.If the direction is neither top or bottom (i.e. left or right), don’t move it in any vertical direction (0 pixels).
  3. $("#' + slider.attr("id") + '").find("div.background2").css("background-position", "..."); gets the new slide and alters the background position in a similar way as div.background. The only difference between the two is that, while the start position of div.background is 0 pixels from the left and 0 pixels from the top, the start position of div.background2 is out-of-view.If it’s sliding from the left, its position will be negative its width (placing it out of view to the left). If it’s sliding from the right, its position will be positive its width (placing it out of view to the right). If it’s sliding from the top, its position will be negative its height (placing it out of view to the top). If it’s sliding from the bottom, its position will be positive its height (placing it out of view to the bottom).Outside of these start positions, the algorithms are precisely the same.
  4. (direction == "left" ? (width - shift.horizontal) + 'px' : (direction == "right" ? (shift.horizontal - width) + 'px' : '0'))If the direction to slide is left, position the new slide at the width of the slide (start position) minus shift.horizontal pixels.If the direction to slide is right, position the new slide at shift.horizontal minus the width of the slide, i.e. negative the width of the slide (start position) plus shift.horizontal.If the direction is neither left or right (i.e. top or bottom), don’t move it in any horizontal direction (0 pixels).
  5. (direction == "top" ? (height - shift.vertical) + 'px' : (direction == "bottom" ? (shift.vertical - height) + 'px' : '0'))If the direction to slide is top, position the new slide at the height of the slide (start position) minus shift.vertical pixels. If the direction to slide is bottom, position the new slide at shift.vertical pixels minus the height of the slide, i.e. negative the height of the slide (start position) plus shift.vertical. If the direction is neither top or bottom (i.e. left or right), don’t move it in any vertical direction (0 pixels).

Conclusion

Last but not least there is a final tidbit of code that needs to execute for all animations (both fade and slide). Since it will execute for both, it will need to go after/outside the effect == "fade" else code; it goes inside and at the end of the if (!slider.is("div.animating")) conditional block.

Senior front end engineer / charlesstover.com

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store