Basic Image slider tutorial

There are a lot of image sliders out now a days. In this blog, I have made this basic image slider for the beginners to get idea that how image slider works.
Click on below link to view demo
https://jsfiddle.net/sunil_kmr19/oons7ogu/
Step 1 : Prepare HTML code with images
First of all we will create our HTML code with images to slide show and put left and right navigation.
<div id=”slider”>
    <ul class=”slides”>
        <li class=”slide active”><img src=”http://beaverslider.com/img/slider-main/1.jpg”></li>
        <li class=”slide”><img src=”http://beaverslider.com/img/slider-main/2.jpg”></li>
        <li class=”slide”><img src=”http://beaverslider.com/img/slider-main/3.jpg”></li>
        <li class=”slide”><img src=”http://beaverslider.com/img/slider-main/4.jpg”></li>
    <!– … and so on –>
    </ul>
<div>
    <p class=”left”>  <a href=”#”> <  </a> </p>
    <p class=”right”> <a href=”#”> > </a></p>
</div>
Step 2 : CSS code
Now we are going to write css code to make adjustment divs and navigation button. We will hide all divs except one and put active class there.
#slider
    {
        width: 960px;
        height: 317px;
        overflow: hidden;
    }
    #slider .slides
    {
        display: block;
        margin:0;
        padding: 0;
    }
    #slider .slide
    {
        /*float: left;*/
        list-style-type: none;
        display: none;
    }
  #slider .active{
        display:block;
    }
    .left{
        position: absolute;
        left: 17px;
        top: 18%;
    }
    .right{
        position: absolute;
        right: 413px;
        top: 18%;
    }
    .left a, .right a{
        text-decoration: none;
        color: rgb(73, 73, 73);
        font-size: 48px;
        background: rgb(204, 204, 204) none repeat scroll 0% 0%;
        border: 1px solid rgb(119, 119, 119);        
    }
    .left a:hover, .right a:hover{
        background: #000;
    }
Step3 : Jquery code
In this jquery part, we will create an animation using left and right navigation. Also we will use setInterval() function to make automatic slideshow.
$(function(){
    var pause = 2000;    // set interval time
    var $slider = $(‘#slider’);     
    var interval;  
    startSlider();     //run startslider function on specific interval
    function startSlider(){
        interval = setInterval(funSlide, pause, true);  //run funslider function on set interval
    }
    function stopSlider(){
        clearInterval(interval);   //clear startslider effect
    }
    function funSlide(value){
        if(value) //check condition true or false
        {
        var $current=$(“#slider .slide:visible”).fadeOut();
        var $next = $current.next().length ? $current.next() : $(“#slider .slide:first”);
        $next.fadeIn(100);            
        }
        else
        {
        var $current=$(“#slider .slide:visible”).fadeOut();
        var $prev = $current.prev().length ? $current.prev() : $(“#slider .slide:last”);
        $prev.fadeIn(100);    
        }
        
    }
    $slider.on(‘mouseenter’, stopSlider).on(‘mouseleave’, startSlider);
    $(‘body’).on(‘click’, ‘.right a’, function(){
        funSlide(true);    //set true on right navigation click
    })
    $(‘body’).on(‘click’, ‘.left a’, function(){
        funSlide(false);  //set false on false navigation click
    })
});