Design Chemical

After our jQuery tutorial yesterday on creating a jQuery Slider Menu we have had several requests on how to modify the jQuery code to scroll the slider images vertically instead of horizontally.

In today’s post we are going to look at changing the jQuery code so that the slider menu can handle both vertical and horizontal animation.

Both the HTML and CSS remain exactly the same for this improved version and you can refer to yesterdays tutorial for the details.

View Demo Download Source Code

The jQuery Code

To make the slider handle both directions we only need to add a few changes to our jQuery code:

$(document).ready(function() {

    // Declare variables
    var direction = 'vertical'; // Additional variable which determines the slider direction - vertical or horizontal
    var width = 400;
    var height = 292; // Declare the height of the slider panel
    var slides = $('#list-images li');
    var numSlides = slides.length;

    // Set CSS of slide-wrap based on direction
    wrapCss = direction == 'vertical' ? {height: height * numSlides} : {width: width * numSlides} ;

    // Wrap the slides & set the wrap width
    slides.wrapAll('<div id="slide-wrap"></div>').css({'float' : 'left','width' : width});
    $('#slide-wrap').css(wrapCss);

  // Hover function - animate the slides based on index of links
  $('#list-links li a').hover(function(){
	$('#list-links li').removeClass('hover');
	var i = $(this).index('#list-links li a');
	$(this).parent().addClass('hover');

	// Set animation based on direction
	params = direction == 'vertical' ? {'marginTop' : height*(-i)} : {'marginLeft' : width*(-i)} ;
	$('#slide-wrap').stop().animate(params);
  });
});

To change the slider animation set the “dimension” variable to either “horizontal” or “vertical”. Our modified hover function now sets the animation parameters using either the width or the height and creates the slider effect by adjusting the left margin or top margin.

View original post – jQuery Tutorial – Create a jQuery Menu Slider

View Demo Download Source Code

Tags: animation, horizontal, jQuery, menu, slider, tutorial, vertical
Categories jQuery, Tutorials 5666 Views