Why are not all images showing up in this slider? <p>Here is my code </p> <pre><code>&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"&gt;&lt;/script&gt; &lt;script&gt; $(document).ready(function() { var startSlider = function() { var startSlide = $(".slider li:first"); var nextSlide = $(".active").next("li"); $(".active").removeClass(); if(nextSlide.html() == null) { nextSlide = startSlide; } nextSlide.addClass("active"); setTimeout(startSlider, 1000); }; setTimeout(startSlider, 1000); }); &lt;/script&gt; &lt;style&gt; .active{ display:none; } &lt;/style&gt; &lt;/head&gt; &lt;body&gt; &lt;ul class="slider" style="list-style:none;"&gt; &lt;li&gt;&lt;div class="active" style="background:#F00;height:100px;width:100px;margin:6px; position: fixed; top: 100px;"&gt;&lt;/div&gt;&lt;/li&gt; &lt;li&gt;&lt;div style="background:#0F0;height:100px;width:100px;margin:6px; position: fixed; top:100px;"&gt;&lt;/div&gt;&lt;/li&gt; &lt;li&gt;&lt;div style="background:#00F;height:100px;width:100px;margin:6px; position: fixed; top:100px;"&gt;&lt;/li&gt; &lt;li&gt;&lt;div style="background:#000;height:100px;width:100px;margin:6px; position: fixed; top: 100px;"&gt;&lt;/div&gt;&lt;/li&gt; &lt;/ul&gt; &lt;/body&gt; &lt;/html&gt; </code></pre> <p>When I run this code only blue and black divs show up again and again.What can be the posible reason for that? I tried to put active class at different position but it did not help.I removed the typo suggested in answer it was not in the original code and showed up only here.</p>