Question

Trying to make a sliding panel where you can click next and back to go between panes,
Ive attached a fiddle to explain better, only my back button doesnt seem to work, Can anybody see why?

http://jsfiddle.net/x2qk7/3/

Answer 1

you have to modify your code a little bit

$(document).ready(function(){
  $('a.next').click(function(){  
    $('.slide').animate({"left": "-=400"}, 500);
  })
  $('a.back').click(function(){  
    $('.slide').animate({"left": "+=400"}, 500);
  })
});

.form-slides {width:400px; overflow:hidden; border: 1px solid #ccc; margin: 25px}
.wrap { width: 9999px; }
.slide {width:400px; float:left; position: relative; background:#eee;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="form-slides">
  <div class="wrap">

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

  </div>
</div>