Jquery slider issues

JavaScript
1

Hi guys,

Im having trouble with a clothing brands panel jquery slider im using,

I had it off css-tricks and have customised it a little.

I’m having problems doing the following:

1.Getting the slider to stop when it comes to the end of the slides. (it keeps sliding and the images slide off the window)

  1. Some of the logos in the panel wrap underneath? (i want to keep them inline)

The javascript which creates the animations is as follows:

$(function() {
	
	var totalPanels			= $(".scrollContainer").children().size();
		
	var regWidth			= 115;
	var regImgWidth			= 115;

	
	var movingDistance	    = 150;
	
	var curWidth			= 115;
	var curImgWidth			= 115;
	var curTitleSize		= "20px";
	var curParSize			= "15px";

	var $panels				= $('#brandsArea .scrollContainer > div');
	var $container			= $('#brandsArea .scrollContainer');

	$panels.css({'float' : 'left','position' : 'relative'});
    
	$("#brandsArea").data("currentlyMoving", false);

	$container
		.css('width', ($panels[0].offsetWidth * $panels.length) + 100 )
		.css('left', "50px");

	var scroll = $('#brandsArea .scroll').css('overflow', 'hidden');

	function returnToNormal(element) {
		$(element)
			.animate({ width: regWidth })
			.find("img")
			.animate({ width: regImgWidth })
		    .end()
			
	};
	
	function growBigger(element) {
		$(element)
			.animate({ width: curWidth })
			.find("img")
			.animate({ width: curImgWidth })
		    .end()
		
	}
	
	//direction true = right, false = left
	function change(direction) {
	   
	    //if not at the first or last panel
		if((direction && !(curPanel < totalPanels)) || (!direction && (curPanel <= 1))) { return false; }	
        
        //if not currently moving
        if (($("#brandsArea").data("currentlyMoving") == false)) {
            
			$("#brandsArea").data("currentlyMoving", true);
			
			var next         = direction ? curPanel + 1 : curPanel - 1;
			var leftValue    = $(".scrollContainer").css("left");
			var movement	 = direction ? parseFloat(leftValue, 10) - movingDistance : parseFloat(leftValue, 10) + movingDistance;
		
			$(".scrollContainer")
				.stop()
				.animate({
					"left": movement
				}, function() {
					$("#brandsArea").data("currentlyMoving", false);
				});
			
			returnToNormal("#panel_"+curPanel);
			growBigger("#panel_"+next);
			
			curPanel = next;
			
			//remove all previous bound functions
			$("#panel_"+(curPanel+1)).unbind();	
			
			//go forward
			$("#panel_"+(curPanel+1)).click(function(){ change(true); });
			
            //remove all previous bound functions															
			$("#panel_"+(curPanel-1)).unbind();
			
			//go back
			$("#panel_"+(curPanel-1)).click(function(){ change(false); }); 
			
			//remove all previous bound functions
			$("#panel_"+curPanel).unbind();
		}
	}
	
	// Set up "Current" panel and next and prev
	growBigger("#panel_3");	
	var curPanel = 3;
	
	$("#panel_"+(curPanel+1)).click(function(){ change(true); });
	$("#panel_"+(curPanel-1)).click(function(){ change(false); });
	
	//when the left/right arrows are clicked
	$(".right").click(function(){ change(true); });	
	$(".left").click(function(){ change(false); });
	
	$(window).keydown(function(event){
	  switch (event.keyCode) {
			case 13: //enter
				$(".right").click();
				break;
			case 32: //space
				$(".right").click();
				break;
	    case 37: //left arrow
				$(".left").click();
				break;
			case 39: //right arrow
				$(".right").click();
				break;
	  }
	});
	
});

Can anyone help me with this?

many thanks

O

2

Im having the above issues in firefox… just looked at it in chrome and noticed the logos are not being displayed inline at all…

so frustrating… does anyone know why this might be?

Example here

3

Can anyone help?

i’ve made some amends on it but I still get the issue where by the logos are wrapping onto another line and it does not stop at the last logo…

I’m stumped as to how I go about doing this… any help would be great…