slider

slider with jquery

by dhaval dave

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<div id="slider"><!--THE WHOLE DIV WITH TWO IMAGES AS EXAMPLE-->
<img src="http://www.popsci.com/sites/popsci.com/files/styles/large_1x_/public/new-google-logo.jpg?itok=ZdIobGek" id="1" />
<img src="https://pbs.twimg.com/profile_images/638743592329019392/uF3AXllP.png" id="2" />
</div>

CSS

#slider{
width: 50px;
height: 40px;
}
#slider>img{
width: 50px;
height: 40px;
position: absolute;
top: 50px;
left: 50px;
display: none
}

JavaScript

sliderInt = 1;
sliderNext = 1;

$(document).ready(function(){
   $("#slider>img#1").fadeIn(300);
   startslider();
});

function startslider(){
   count = $("#slider img").size();

   loop = setInterval(function(){

   if(sliderNext >count){
       sliderNext = 1;
       sliderInt = 1;
    }else{
      //document.write("Count "+count+" / slidernext ="+sliderNext);
    }

    $("#slider>Img").fadeOut(300);
    $("#slider>Img#" + sliderNext).fadeIn(300);

    sliderInt = sliderNext;
    sliderNext= sliderNext+1;

   }, 3000)
}