Question

Hi I am trying to incorporate the code that I found on this jfiddle: http://jsfiddle.net/x2qk7/158/

Into my website but its not working.

Pasted from my actual page It looks like this:

<script type="text/javascript"> $(document).ready(function(){

    $('a.next').click(function(){             
        $('.slide').animate({left:-720})
    })

});​ </script>

<style>.form-slides {width:100000px;} .slide {width:300px;float:left;left:0;position:relative;}​</style>

<div class="form-slides">
    <div class="slide">
        <p>Lipsum blah blah blah</p>
        <a href="#" class="next">Next</a> 
    </div>
    <div class="slide">
        <p>Lipsum blah blah blah</p>
        <a href="#" class="next">Next</a> 
    </div>
    <div class="slide">
        <p>Lipsum blah blah blah</p>
        <a href="#" class="next">Next</a> 
    </div> </div>

It seems to be exact, but its not working at all. Am I missing something?

Answer 1

1. Is jQuery loaded?

2. I don’t know what’s your goal but I think changing left in animation may help to go to the 3rd and further slide

   $('a.next').click(function(){             
       $('.slide').animate({left: "-=785px"})
   })
   

   Try this.

3. To answer @Daniel Fein comment: yes there is a way and it’s quite simple.
   Wrap it with a <div> and add overflow:hidden property to it. Just like this