title: Simple Carousel Example from Google
body: <p>I was searching for a simple carousel example in Google and I came across one and its link is :</p>
  
  <p><a href="http://jsfiddle.net/paulmason411/TZy7A/2/" rel="nofollow">http://jsfiddle.net/paulmason411/TZy7A/2/</a></p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script&gt;
  var $slider = $('.slider'); // class or id of carousel slider
  var $slide = 'li'; // could also use 'img' if you're not using a ul
  var $transition_time = 1000; // 1 second
  var $time_between_slides = 4000; // 4 seconds
  
  function slides(){
    return $slider.find($slide);
  }
  
  slides().fadeOut();
  
  // set active classes
  slides().first().addClass('active');
  slides().first().fadeIn($transition_time);
  
  // auto scroll 
  $interval = setInterval(
      function(){
        var $i = $slider.find($slide + '.active').index();
  
        slides().eq($i).removeClass('active');
        slides().eq($i).fadeOut($transition_time);
  
        if (slides().length == $i + 1) $i = -1; // loop to start
  
        slides().eq($i + 1).fadeIn($transition_time);
        slides().eq($i + 1).addClass('active');
      }
      , $transition_time +  $time_between_slides 
  );
  &lt;/script&gt;
  
  
  
  &lt;style&gt;
  
  .slider {
    margin: 10px 0;
    width: 580px; /* Update to your slider width */
    height: 250px; /* Update to your slider height */
    position: relative;
    overflow: hidden;
  }
  
  .slider li {
    display: none;
    position: absolute; 
    top: 0; 
    left: 0; 
  }
  &lt;/style&gt;
  
  
  
  &lt;/head&gt;
  
  
  
  
  
  &lt;body&gt;
  
  
  &lt;ul class="slider"&gt;
    &lt;li&gt;
      &lt;img src="http://lorempixel.com/580/250/nature/1"&gt; &lt;!-- random image --&gt;
    &lt;/li&gt;
    &lt;li&gt;
      &lt;img src="http://lorempixel.com/580/250/nature/2"&gt; &lt;!-- random image --&gt;
    &lt;/li&gt;
    &lt;li&gt;
      &lt;img src="http://lorempixel.com/580/250/nature/3"&gt; &lt;!-- random image --&gt;
    &lt;/li&gt;
    &lt;li&gt;
      &lt;img src="http://lorempixel.com/580/250/nature/4"&gt; &lt;!-- random image --&gt;
    &lt;/li&gt;
  &lt;/ul&gt;
  
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>However I created a notepad file with .html extension and added all these code there and tried to open it in the browser and does not work. Could you please let me know why it did not work for me.</p>
  
  <p>This is the code, this is the exact copy of what you see in the above link.</p>