JQuery Image slider not sliding

Question

It seems that I cannot get my slider to slide for some reason...

Here is the HTML :

<div id="slider"><!--THE WHOLE DIV WITH TWO IMAGES AS EXAMPLE-->
<img src="1.jpg" id="1" />
<img src="2.jpg" id="2" />
</div>

Here is the CSS :

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

Here is the Javascript :

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript">

sliderInt = 1;
sliderNext = 2;

$(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("Error!");
    }

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

    sliderInt = sliderNext;
    sliderNext= sliderNext+1;

}, 3000)
}

</script>

Please tell me where I've made a mistake, so I can learn from it as I still consider myself a beginner in JS/JQuery and would like to learn from my mistakes to improve my skills.

Thank You!

Answer 1

Replace all the Img in your code by img and dollar sign $ by # in :

$("$slider>Img#" + sliderNext).fadeIn(300);
___^_______^

Should be :

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

Hope this helps.

---

Snippet

 sliderInt = 1; sliderNext = 2; $(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{ console.log("Error!"); } $("#slider>img").fadeOut(300); $("#slider>img#" + sliderNext).fadeIn(300); sliderInt = sliderNext; sliderNext= sliderNext+1; }, 3000) } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="slider"><!--THE WHOLE DIV WITH TWO IMAGES AS EXAMPLE--> <img src="http://www.menucool.com/slider/prod/image-slider-5.jpg" id="1" /> <img src="http://www.menucool.com/slider/prod/image-slider-2.jpg" id="2" /> </div> 

Answer 2

Try this :

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)
}