Jump to content

jQuery horozintal slider trouble


Recommended Posts

*** THIS ISSUE HAS BEEN RESOLVED ***hi there, i'm a newbie who is trying to write a simple horizontal slider. at least, the idea was simple in my head. everything works great, except for when i click my next/previous buttons too quickly, which causes my slides to be placed in the incorrect positions and breaks my slider. The slider can be seen here - http://www.dghein.com/sandwichmuffin/slides are absolutely positioned within their relative container, the second slide is what is visible when the page loads:

.slide-wrapper {width:630px; height:285px; margin-right:15px; float:left; position:relative; overflow:hidden;}.slide-wrapper-inner {position:relative;}.slide {width:630px; height:285px; position:absolute; overflow:hidden;}#slide1 {background:none; top:0; left:-630px;}#slide2 {background:none; top:0; left:0;}#slide3 {background:none; top:0; left:630px;}

Here is the code I am using to 1) Position the first or last slide depending on which direction the user is sending the slider (2) Take the first or last slide and insert it before or after the first/last slide within the DOM (3) Move all slides to the left or right, creating the 'slide' effect.

$(document).ready(function(){		// ADD CLICK FUNCTIONS TO LEFT/RIGHT BUTTONS	$('#btn-slideright').click(function(){		$('.slide-wrapper-inner div:last').css('left','-1260px');		$('.slide-wrapper-inner div:last').insertBefore('.slide-wrapper-inner div:first');		$('.slide').animate({left:'+=630px'}, 500);		});	$('#btn-slideleft').click(function(){		$('.slide-wrapper-inner div:first').css('left','1260px');		$('.slide-wrapper-inner div:first').insertAfter('.slide-wrapper-inner div:last');		$('.slide').animate({left:'-=630px'}, 500);	});		});

As I said, if I click the buttons too quickly, the slider seems to get confused and throws my slides all out of wack. Any help here would be greatly appreciated!

Edited by dustaMaphone
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Create New...