How to create your own slider using jQuery?

I'm trying to implement a Slider/Carousel using jQuery. What is wrong with this JavaScript code trying to animate a div?

• Sorry, I know this is a kind of a lame question. I'm trying to learn Javascript/jQuery/HTML/CSS and I'm having a rough time interfacing all of them together. I set up a jsfiddle with the code in case someone wants to take a poke at it and I'll be posting the relevant code and the errors in just a second. Fiddle: http://jsfiddle.net/k233R/ --- The error I'm getting is TypeError: 'undefined' is not a function (evaluating 'animatingDiv.animate({left:addstring},1000)') I've read the docs and looked at examples and it looks like everything is running correctly. I've had some other devs look at it and they also can't find the issue. Any help would be so awesome. --- Javascript $(document).ready(function(){ function nextSlideOffset(fromSlide) { //TODO: Get the state of all of the relevant forms and calculate the correct next slide //Default: return the current position - the current slide's offset var movingDiv = $('#wizard_slides')[0]; var currentPosition = movingDiv.offsetLeft; var slideWidth = fromSlide.offsetWidth; return -slideWidth; } function animateLeft(x) { var addstring = "+=" + x; var animatingDiv = $( "#wizard_slides" )[0]; animatingDiv.animate({left:addstring},1000); } function animateToPosition(x) { var animatingDiv = $( "#wizard_slides" )[0]; animatingDiv.animate({left:x},1000); } $('.slide-next-button').click(function(e){ var slide = e.target.parentNode; var offset = nextSlideOffset(slide); animateLeft(offset); }); }); --- HTML <div id="wizard_window"> <div id="wizard_slides"> <div class="slide"> SLIDE 1 <button href="javascript:void(0)" class="btn btn-red slide-next-button">Next</button> </div> <div class="slide"> SLIDE 2 </div> </div> </div> --- CSS #wizard_window{ width: 1280px; overflow: hidden; } #wizard_slides { background-color: #FAFAFA; width: 100000px; height: 380px; padding: 0px; } #wizard_slides .slide{ width: 1280px; min-height: 380px; display: inline-block; background: purple; float: left; }

• Answer:

  There are a couple of issues with the JSFiddle. 1. jQuery is not included by default. That looks to be the source of the 'undefined' error, because animate is a jQuery function. You can add jQuery in the 'Frameworks & Extensions' drop-down on the left. 2. Take off the [0] references, as mentioned by in the comments. You're just selecting the one container. 3. The wizzard_slides container needs to have position: absolute; applied in the CSS; otherwise it won't move anywhere. These three fixes will get the JSFiddle working at least, which should be a start.