Jump to content
Sign in to follow this  

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

Share this post

Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Sign in to follow this  

  • Create New...