Posted By

delineo on 11/18/10


Tagged


Versions (?)

jQuery Slider


 / Published in: jQuery
 

A description of a slider using jQuery animate function.

  1. The HTML:
  2.  
  3. <div id="slider_box">
  4. <div id="slider_container">
  5. <div id="slider">
  6.  
  7. slider content...
  8.  
  9. </div>
  10. </div>
  11. </div>
  12.  
  13. <a onclick="if ( jQuery('#slider').position().left <= -800 ) { jQuery('#slider').animate({left: "+=800px"}, {easing: 'swing', duration: 1000}); } return false;">Previous</a>
  14. <a onclick="if ( jQuery('#slider').position().left > -7200 ) { jQuery('#slider').animate({left: "-=800px"}, {easing: 'swing', duration: 1000}); } return false;">Next</a>
  15.  
  16. The CSS:
  17.  
  18. #slider_box {
  19. position: relative;
  20. width: 800px;
  21. height: 200px;
  22. }
  23.  
  24. #slider_container {
  25. position: relative;
  26. width: 800px; // the viewport width
  27. height: 200px;
  28. overflow: hidden;
  29. display: inline;
  30. }
  31.  
  32. #slider {
  33. position: relative;
  34. width: 8000px; // the actual width of the entire banner, 10 elements
  35. height: 200px;
  36. overflow: hidden;
  37. }

Report this snippet  

You need to login to post a comment.