Create your own Custom Navigation Slider with JQuery

The Navigation Slider

The Navigation slider has become popular around the web for a while now, the idea is to have multiple headlines topics rotate in the slider. This gives more area for large images and to put emphasis on the headlines.

This tutorial will explain how to make your own like the one above, it also assumes you have a working knowlegde of Html,CSS,Javascript and JQuery.

Where to start?

We start with a basic div with one or more child div's with the same class name "specialSlideDiv". Each one represents one of the headline slides div.

  

   
Header 1
  
  

    
Header 2
  
  ...

We then create the navigationWindow div with desired width and height. We want the position relative so its child elements when set as absolute are relative to its parent, we also want overflow hidden such that child elements outside the parent will not be visible.

  

    

      ".specialNavDiv" moved here
     
  

We use the JQuery class selector to select each specialNavDiv and then we loop through each item. Using JQuery we take each specialSlideDiv and we insert them in the navigationContainer from left to right via absolute position.

$(".specialNavDiv).each(function(i,e)
        {
            $(e).appendTo("#navigationContainerId");
            $(e).css("left",\b\ i * properties.width \/b\ + "px");
            $(e).css("position","\b\ absolute \/b\");
            $(e).css("width",properties.width+"px");
            $(e).css("height",properties.height+"px");
            $(e).css("top","0px");
        });   

The layout will resemble something like this.

Moving the slider

To move the slider we move the navigationContainer within the navigationWindow. We do that by adjusting the absolute left css value. Using the javascript animate function you can incrementally or decrementally adjust css values for a duration of time. An index currentIndex variable is created for our slider so we can keep track of which slide we are currently on. We then create two buttons, one to navigate left and one right and set our click event callback. On click we call the clickRight or clickLeft function that increments or decrements our currentIndex, moves the slider left or right and disables the buttons as needed.

var currentIndex = 0;
var navSlidesCount = $(".specialNavDiv").length;
//set button on click events
$(leftButtonSelector).click(clickLeft);
$(rightButtonSelector).click(clickRight);

function clickRight(ev){
   currentIndex++;
   navigate(onRightComplete)     
}
function clickLeft(ev){
   currentIndex--;
   navigate(onLeftComplete)     
}
function navigate(onComplete){
  if(currentIndex==0)
     $(leftButtonSelector).attr("disabled","disabled");
  else if(currentIndex == navSlidesCount-1)
     $(rightButtonSelector).attr("disabled","disabled");
  $("#"+navContainerId).animate(
       {left:(-currentIndex)*properties.width+'px'}
        ,properties.duration
        ,'linear'
        ,onComplete); 
}
function onLeftComplete(){
  if(index < count-1)
    $(rightButtonSelector).removeAttr("disabled");
  setRadio();
}
function onRightComplete(){
  if(index > 0)
    $(leftButtonSelector).removeAttr("disabled");
  setRadio();
}

Updating radio buttons

To update the radio buttons such that they look selected we need to update their checked property. When the navigation moves left or right we update the selected radio button. The radio buttons are also clickable and when they are clicked the slide goes to the appropriate index.

$('input[name='+ radGroupName + ']:radio').click(radClick);

function setRadio(){
  $(radSelector).each(function (i,e){
    if(i == index)
      $(e).attr("checked","checked");
    else
      $(e).removeAttr("checked");
  });
}
function radClick(ev){
  $(radSelector).each(function (i,e){
     if(e == ev.target)
       if(i > index){
          index = i;
          navigate(ev,onRightComplete);
       }
       else{   
          index = i;
          navigate(ev,onLeftComplete);
       }               
  });
}

Next we want to style the radio button but there is a problem, CSS and Html does not let you do this with a input tag. What we can do is style a div or span tag and place a radio button that has display none next to it. When the input is checked we the css selector "+" to locate the next element. We also need to then assign a click function for the spans and when they are clicked we need to update the hidden radio inputs and trigger the click for the corresponding input.

   
    
   ...

Note: we don't actually need to use radio inputs but it makes our HTML use correct semantics.

Addition of moving background

I've added a neat visual effect of a moving background, much similar to many modern iphone apps. The background div moves along with the navigation window.

Auto rotating the slider

The final step is adding timer that will incrementally call a function every X milliseconds. We use the javascript setInterval/clearInterval functions to achieve this. We create a resetTimeout function because if the user navigates the slider themselves we want to reset the interval.

var timeoutId;
var autoRotateDuration = 7000;//in milliseconds

function resetInterval(){
    if(timeoutId != null)
      clearInterval(timeoutId);
    timeoutId = setInterval(function autoRotate(){
        if(index < count-1)
          clickRight(null);
        else{
          index = 0;
          navigate(null,onLeftComplete);
        }
      },autoRotateDuration);
}

Thanks for reading!
View source: http://madmanmathew.gi thub.com/blog/NavigationDemo.html
setInterval Docs :W3 School