JQuery

Create a Simple Image Slider in HTML

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. {  
  3.       
  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. }  
  26.   
  27. #slider img  
  28. {  
  29.     position:relative;  
  30.     float:right;  
  31.     width:640px;  
  32.     height:240px;   
  33.     top: 0px;  
  34.       
  35. }  
  36.   
  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;  
  52.       
  53. }  
  54. .btn:hover  
  55. {  
  56.     opacity:1;  
  57. }  
  58.   
  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);  
  18.   
  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(); }  
  23.   
  24.             if (c === imgN) { $('.next').hide(); }  
  25.             else { $('.next').show(); }  
  26.         }  
  27.         btn();  
  28.   
  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.         }  
  42.   
  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>  

Up Next
    Ebook Download
    View all
    Learn
    View all
    Membership not found