SHARE
TWEET

Untitled

a guest Feb 22nd, 2019 46 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. $("#slideRight").click(function() {
  2. $("#slider").animate({right:700});
  3. });
  4.  
  5. $("#slideLeft").click(function() {
  6. $("#slider").animate({left:700});
  7. });
  8.    
  9. <div id="slideButtons">
  10. <input type="button" value="next L" id="slideLeft" />
  11. <input type="button" value="next R" id="slideRight" />
  12. </div>
  13.  
  14. <div id="slider">
  15. <img src="slideTest.jpg" alt="" />
  16. <img src="slideTest2.jpg" alt="" />
  17. <img src="slideTest3.jpg" alt="" />
  18. </div>
  19.    
  20. #slider {
  21. height: auto;
  22. width: 700px;
  23. position: relative;
  24. background-color: blue;
  25. }
  26.    
  27. // First make the first image visible
  28. $(".slide-content img:first-child").show();
  29.  
  30. // Bind the click handler
  31. $("#slideRight").click(function() {
  32.  
  33. // if there is only one image in the slider then return false
  34. if($(".slide-content > img").length == 1)
  35. {
  36.     return false;
  37.  
  38. }
  39.  
  40. // Set current to the visible element
  41. var current = $(".slide-content > img:visible").attr('id');
  42.  
  43. // hide the visible element
  44. $('#'+current).hide();
  45.  
  46.  
  47. if(current == $(".slide-content > img").length )
  48. {
  49.     current = 1;    
  50. }
  51. else
  52. {
  53.     current = parseInt(current)+1;  
  54. }
  55.  
  56. $('#'+current).show();
  57.  
  58.  
  59. });
  60.  
  61. $("#slideLeft").click(function() {
  62. if($(".slide-content > img").length == 1)
  63. {
  64.     return false;
  65.  
  66. }
  67.  
  68. var current = $(".slide-content  > img:visible").attr('id');
  69. $('#'+current).hide();
  70. if(current == 1)
  71. {
  72.     current = $(".slide-content > img").length;
  73. }
  74. else
  75. {
  76.     current = parseInt(current)-1;  
  77. }
  78.  
  79. $('#'+current).show();
  80.  
  81.  
  82. });
  83.  
  84. <div id="slideButtons">
  85. <input type="button" value="next L" id="slideLeft" />
  86. <input type="button" value="next R" id="slideRight" />
  87. </div>
  88.  
  89. <div class="slide-content">
  90. <img id = '1' src="slideTest.jpg" alt="" />
  91. <img id = '2' src="slideTest2.jpg" alt="" />
  92. <img id = '3' src="slideTest3.jpg" alt="" />
  93. </div>
RAW Paste Data
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy. OK, I Understand
 
Top