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

<div id="galcontainer">
<div id="gallery"><!— hides images such that on image is displayed at a time  -->
<div id="slider”><!—Slider which moves  -->
<img alt="Text" src="#">
<img alt="Text"src="#">
<img alt="Text"src="#">
<img alt="Text"src="#">
<img alt=" Text "src="#">
</div>
<div class="btnprev”>prev</div><!—Button to View PreviousImages -->
<div class="btn next">next</div><!—Button to View Next Images-->
</div>
</div>

CSS

body
{

}
#galcontainer
{
    width:640px;
    height:240px;
}
#gallery
{
    position:relative;
    overflow:hidden; /* used to hide images  */
    width:100%;
    height:100%;
    border: solid 5px Grey;
}
#slider
{
    position:absolute;/* Important.In Order to animate the div*/
    top:0px;
    left:0px;
    width:100%;
    height:100%;
}

#slider img
{
    position:relative;
    float:right;
    width:640px;
    height:240px;
    top: 0px;

}

.btn
{
    position:absolute;
    z-index:50;
    height:40px;
    padding:0px;
    top:90px;
    font-family:Impact, Sans-Serif;
    font-size:23px;
    line-height:40px;
    color:#fff;
    display:inline-block;
    opacity:0.7;
    background:#000;
    cursor:pointer;

}
.btn:hover
{
    opacity:1;
}

.prev{left:0%;}
.next{right:0%;}

jQuery

<script src="jquery-1.10.2.js"></script>
<script src="jquery-ui-1.10.4.custom.js"></script>
<script src="jquery-ui-1.10.4.custom.min.js"></script>
<script language="javascript" type="text/javascript">
    //$(document).ready(); Used To Detect if the Page has Completely Loaded.
    $(document).ready(function () {
        // galW is a variable which stores the width of the Gallery.
        var galW = $('#gallery').width();
        // imgN is a variable which stores the no of Img in the <div id="#slider">.
        var imgN = $('#slider img').length;
        // c is the constant used to determine the position of the Slider.
        var c = 1;
        //set the width of #slider with galW * imgN
        //i.e if the width of the gallery #gallery  is 100px
        // and the no of images in #slider in 5
        //then the Width of the #slider will be set to 500px (100*5);
        $('#slider').width(galW * imgN);

        //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)
        function btn() {
            if (c === 1) { $('.prev').hide(); }
            else { $('.prev').show(); }

            if (c === imgN) { $('.next').hide(); }
            else { $('.next').show(); }
        }
        btn();

        //function animate() is the Heart of the slider, is used to move the image
        //the animation is done using an animate() function
        //The function takes miminum 2 arguments(I have used three)
        //1>Propert --- i.e Height, Width, opacity,left,right etc. (Using left property)
        //2>Speed   --- which is determined by the time in mili-seconds.  (Using 1000 mili-seconds i.e 1 sec)
        //3>Easing  --- functions specify the speed at which an animation progresses at different points within the animation(Using linear)
        //Try easeInOutElastic,easeOutBounce,easeInOutBounce,easeOutElastic
        //Note: For Easing Effects jquery-ui-1.10.4.custom.js and jquery-ui-1.10.4.custom.min.js is required
        function animate() {
            // The function animates the #slider to -ve position. The positon is generated by a simple formula
            // galW * (c - 1) i.e multipling the width of the gallery with the constant (c-1)
            $('#slider').stop().animate({ left: '-' + galW * (c - 1) }, 1000, "linear");
        }

        //Registered a click event in the div with class='next'
        //On the click of the div with class .next the value of c is incremented and functions btn() and animate() are called
        $('.next').click(function () {
            c++;
            btn();
            animate();
        });
        //On the click of the div with class .prev the value of c is decremented and functions btn() and animate() are called
        $('.prev').click(function () {
            c--;
            btn();
            animate();
        });
    });
</script>