custom slider - previous next buttons not working

custom slider - previous next buttons not working

I am learning jQuery and this is my first project.. so sorry for any silly mistake you may found.  I have two problems

[1] Previous and next buttons not working. I have been trying since last 2 days!
[2] Slider is not looping properly


This is HTML

  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <title>Slider</title>
  5. <link rel="stylesheet" href="style.css">
  6. </head>
  7. <body>
  8. <div id="slider">
  9. <div id="slides">
  10. <img src="images/image1.jpg" height="400" width="600" alt="" id="1">
  11. <img src="images/image2.jpg" height="400" width="600" alt="" id="2">
  12. <img src="images/image3.jpg" height="400" width="600" alt="" id="3">
  13. </div>
  14. </div>
  15. <div id="slidertextwrap">
  16. <div class="slidertext" id="1">
  17. <h3>This is title</h3>
  18. <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit, deserunt sapiente eum accusamus quod, officiis aperiam maiores assumenda, perspiciatis eius ab et quisquam facere dolorem repellendus totam numquam consectetur. Culpa.</p>
  19. </div>
  20. <div class="slidertext" id="2">
  21. <h3>This is title</h3>
  22. <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit, deserunt sapiente eum accusamus quod, officiis aperiam maiores assumenda, perspiciatis eius ab et quisquam facere dolorem repellendus totam numquam consectetur. Culpa.</p>
  23. </div>
  24. <div class="slidertext" id="3">
  25. <h3>This is title</h3>
  26. <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit, deserunt sapiente eum accusamus quod, officiis aperiam maiores assumenda, perspiciatis eius ab et quisquam facere dolorem repellendus totam numquam consectetur. Culpa.</p>
  27. </div>
  29. </div>
  30. <div id="slidernav">
  31. <a href="#" class="left" onclick="prev(); prevt(); return false;">Previous</a>
  32. <a href="#" class="right" onclick="next(); nextt(); return false;">Next</a>
  33. </div>

  35. <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
  36. <script src="slider.js"></script>
  37. <script src="slidertext.js"></script>
  38. </body>
  39. </html>

This is JS


  3. var width = 940;
  4. var animationSpeed = 1000;
  5. var pause = 3000;
  6. var currentSlide = 1;

  8. var $slider = $('#slider');
  9. var $slideContainer = $slider.find('#slides');
  10. var $slides = $slideContainer.find('img');

  12. var interval;

  14. function startSlider() {
  15. interval = setInterval(function() {
  16. $slideContainer.animate({'margin-left': '-='+width}, animationSpeed, function() {
  17. currentSlide++;
  18. if (currentSlide === $slides.length) {
  19. currentSlide = 1;
  20. $slideContainer.animate({'margin-left': 0}, animationSpeed);
  21. }
  22. });
  23. }, pause);
  24. }

  26. function stopSlider() {
  27. clearInterval(interval)
  28. }

  30. startSlider();


  33. function prev() {
  34. $slideContainer.animate({'margin-left': '-'+width}, animationSpeed);
  35. }

  37. function next() {
  38. $slideContainer.animate({'margin-left': '+'+width}, animationSpeed);
  39. }