Prerequisites

  • HTML
  • CSS
  • JavaScript
  • jQuery

Content
  1. How it works (explanation)
  2. HTML
  3. CSS
  4. jQuery

How it works

Before starting with the code we need to understand how the slider actually works. The following diagram explains.

  1. div “#slider” is the container that contains all the images and the slider is the one that moves (it is animated). The default orientation of the images will be one upon the another so we need to change the orientation of the images such that it comes one beside the other, by setting a style “float:right;” to the images.

  2. div “#gallery” is the container that contains the div “#slider” and its main purpose is to hide all the images except one.

  3. div “#galcontainer” is used as a container in which the gallery is contained. The “#gallery” is of height and width 100% so that it becomes responsive. The “#galcontainer” helps define its height and width.

  4. Now on the click of the button “.btn .prev” or “.btn .next” we animate the div “#slider” to move to some position in the left. If ”.next” is clicked then the position is a +ve number else if “.prev” is clicked then the position is a -ve number.
HTML
  1. <div id="galcontainer">
  2. <div id="gallery"><!— hides images such that on image is displayed at a time -->
  3. <div id="slider”><!—Slider which moves -->
  4. <img alt="Text" src="#">
  5. <img alt="Text"src="#">
  6. <img alt="Text"src="#">
  7. <img alt="Text"src="#">
  8. <img alt=" Text "src="#">
  9. </div>
  10. <div class="btnprev”>prev</div><!—Button to View PreviousImages -->
  11. <div class="btn next">next</div><!—Button to View Next Images-->
  12. </div>
  13. </div>
CSS
  1. body
  2. {
  4. }
  5. #galcontainer
  6. {
  7. width:640px;
  8. height:240px;
  9. }
  10. #gallery
  11. {
  12. position:relative;
  13. overflow:hidden; /* used to hide images */
  14. width:100%;
  15. height:100%;
  16. border: solid 5px Grey;
  17. }
  18. #slider
  19. {
  20. position:absolute;/* Important.In Order to animate the div*/
  21. top:0px;
  22. left:0px;
  23. width:100%;
  24. height:100%;
  25. }
  27. #slider img
  28. {
  29. position:relative;
  30. float:right;
  31. width:640px;
  32. height:240px;
  33. top: 0px;
  35. }
  37. .btn
  38. {
  39. position:absolute;
  40. z-index:50;
  41. height:40px;
  42. padding:0px;
  43. top:90px;
  44. font-family:Impact, Sans-Serif;
  45. font-size:23px;
  46. line-height:40px;
  47. color:#fff;
  48. display:inline-block;
  49. opacity:0.7;
  50. background:#000;
  51. cursor:pointer;
  53. }
  54. .btn:hover
  55. {
  56. opacity:1;
  57. }
  59. .prev{left:0%;}
  60. .next{right:0%;}
jQuery
  1. <script src="jquery-1.10.2.js"></script>
  2. <script src="jquery-ui-1.10.4.custom.js"></script>
  3. <script src="jquery-ui-1.10.4.custom.min.js"></script>
  4. <script language="javascript" type="text/javascript">
  5. //$(document).ready(); Used To Detect if the Page has Completely Loaded.
  6. $(document).ready(function () {
  7. // galW is a variable which stores the width of the Gallery.
  8. var galW = $('#gallery').width();
  9. // imgN is a variable which stores the no of Img in the <div id="#slider">.
  10. var imgN = $('#slider img').length;
  11. // c is the constant used to determine the position of the Slider.
  12. var c = 1;
  13. //set the width of #slider with galW * imgN
  14. //i.e if the width of the gallery #gallery is 100px
  15. // and the no of images in #slider in 5
  16. //then the Width of the #slider will be set to 500px (100*5);
  17. $('#slider').width(galW * imgN);
  19. //The function btn() is used to hide or show the .next or .prev button on the bases of the value in 'c' and 'imgN'(Image Count)
  20. function btn() {
  21. if (c === 1) { $('.prev').hide(); }
  22. else { $('.prev').show(); }
  24. if (c === imgN) { $('.next').hide(); }
  25. else { $('.next').show(); }
  26. }
  27. btn();
  29. //function animate() is the Heart of the slider, is used to move the image
  30. //the animation is done using an animate() function
  31. //The function takes miminum 2 arguments(I have used three)
  32. //1>Propert --- i.e Height, Width, opacity,left,right etc. (Using left property)
  33. //2>Speed --- which is determined by the time in mili-seconds. (Using 1000 mili-seconds i.e 1 sec)
  34. //3>Easing --- functions specify the speed at which an animation progresses at different points within the animation(Using linear)
  35. //Try easeInOutElastic,easeOutBounce,easeInOutBounce,easeOutElastic
  36. //Note: For Easing Effects jquery-ui-1.10.4.custom.js and jquery-ui-1.10.4.custom.min.js is required
  37. function animate() {
  38. // The function animates the #slider to -ve position. The positon is generated by a simple formula
  39. // galW * (c - 1) i.e multipling the width of the gallery with the constant (c-1)
  40. $('#slider').stop().animate({ left: '-' + galW * (c - 1) }, 1000, "linear");
  41. }
  43. //Registered a click event in the div with class='next'
  44. //On the click of the div with class .next the value of c is incremented and functions btn() and animate() are called
  45. $('.next').click(function () {
  46. c++;
  47. btn();
  48. animate();
  49. });
  50. //On the click of the div with class .prev the value of c is decremented and functions btn() and animate() are called
  51. $('.prev').click(function () {
  52. c--;
  53. btn();
  54. animate();
  55. });
  56. });
  57. </script>