Tutorial: How to create your own continuously slide effect plugin with jQuery

The effect i show up till now are all discontinuous effect that can be easily create using CSS and jQuery. Some people may wonder how continuous sliding effect is being achieved. In this tutorial, i will demonstrate the concept and a plugin which i build immediately during this tutorial on how to simultaneously pull out the containers in the easily way. The demo can be view at the bottom of this post.

Concept

The concept for continuously sliding effect is really not that difficult. Imagining you have a photo frame and a long list of photo arranged in a straight row. The list is placed behind the photo frame and you started to pull it accordingly to  display a new photo within the frame. Anything outside the frame is being blocked which restrict the display only within the frame itself. This way you will see a continuously slide effect being displayed.

CSS

From the description above, it is clear that css is required to assist on building the effect (every type of effect cannot escape the demon hand of CSS! RAWR!). And below listed the required CSS rule from the description written above.

  1. float: left -  to flow all containers in a straight row
  2. position: relative - so that the container can be hidden in IE and FF
  3. overflow: hidden -  we want to hide all other element outside the frame
  4. margin-left or left: - this is where we adjust the element so that it get pull to the left or right within the frame

HTML

On the description above, we will have a rough idea how many containers are required to built the effect and plugin. The following list down the approximate container required.

  1. Main Frame
  2. container to contain x element
  3. the x number of elements in the frame
  4. next button
  5. right button

Everything is put it simple so that we have a clear idea how this is being done. The reason why we need the extra container to contain the x element is because the element WILL NOT float side by side if you do not define a length that is big enough for all elements to go side by side.

Coding

This part always get a bit confusing when there are piece and pieces of code flying around the place. But i will try my best to explain what is happening in here.

One thought on “Tutorial: How to create your own continuously slide effect plugin with jQuery

Comments are closed.