Jump to content

jQuery horozintal slider trouble


dustaMaphone

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!

Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...