title: JavaScript carousel not working
body: <p>So im trying to make a carousel full screen for a presentation. Im not a pro coder im in a phase of learning. I have this code and im having as you can see and error and the carousel is all broken and i dont know why. I could appreciate some guidance or help. </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var $item = $('.carousel .item');
  var $wHeight = $(window).height();
  
  $item.height($wHeight); 
  $item.addClass('full-screen');
  
  var $numberofSlides = $('.item').length;
  var $currentSlide = Math.floor((Math.random() * $numberofSlides));
  
  $('.carousel-indicators li').each(function(){
    var $slideValue = $(this).attr('data-slide-to');
    if($currentSlide == $slideValue) {
      $(this).addClass('active');
      $item.eq($slideValue).addClass('active');
    } else {
      $(this).removeClass('active');
      $item.eq($slideValue).removeClass('active');
    }
  });
  
  $('.carousel img').each(function() {
    var $src = $(this).attr('src');
    var $color = $(this).attr('data-color');
    $(this).parent().css({
      'background-image' : 'url(' + $src + ')',
      'background-color' : $color
    });
    $(this).remove();
  });
  
  $(window).on('resize', function (){
    $wHeight = $(window).height();
    $item.height($wHeight);
  });
  
  $('.carousel').carousel({
    interval: 6000,
    pause: "false"
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>h3 {
    display: inline-block;
    padding: 10px;
    background: #B9121B;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
  }
  
  .full-screen {
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;script src="sliderjava.js" type="text/javascript"&gt;&lt;/script&gt;
  &lt;link rel="stylesheet" type="text/css" href="sliderstyle.css"&gt; 
  &lt;/head&gt;
  &lt;body&gt;
  &lt;div id="mycarousel" class="carousel slide" data-ride="carousel"&gt;
    &lt;!-- Indicadores --&gt;
    &lt;ol class="carousel-indicators"&gt;
      &lt;li data-target="#mycarousel" data-slide-to="0"&gt;&lt;/li&gt;
      &lt;li data-target="#mycarousel" data-slide-to="1"&gt;&lt;/li&gt;
      &lt;li data-target="#mycarousel" data-slide-to="2"&gt;&lt;/li&gt;
      &lt;li data-target="#mycarousel" data-slide-to="3"&gt;&lt;/li&gt;
      &lt;li data-target="#mycarousel" data-slide-to="4"&gt;&lt;/li&gt;
    &lt;/ol&gt;
  
    &lt;!-- Slides --&gt;
    &lt;div class="carousel-inner" role="listbox"&gt;
      &lt;div class="item"&gt;
          &lt;img src="https://unsplash.it/2000/1250?image=397" data-color="lightblue" alt="First Image"&gt;
          &lt;div class="carousel-caption"&gt;
              &lt;h3&gt;First Image&lt;/h3&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="item"&gt;
          &lt;img src="https://unsplash.it/2000/1250?image=689" data-color="firebrick" alt="Second Image"&gt;
          &lt;div class="carousel-caption"&gt;
              &lt;h3&gt;Second Image&lt;/h3&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="item"&gt;
          &lt;img src="https://unsplash.it/2000/1250?image=675" data-color="violet" alt="Third Image"&gt;
          &lt;div class="carousel-caption"&gt;
              &lt;h3&gt;Third Image&lt;/h3&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="item"&gt;
          &lt;img src="https://unsplash.it/2000/1250?image=658" data-color="lightgreen" alt="Fourth Image"&gt;
          &lt;div class="carousel-caption"&gt;
              &lt;h3&gt;Fourth Image&lt;/h3&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="item"&gt;
          &lt;img src="https://unsplash.it/2000/1250?image=638" data-color="tomato" alt="Fifth Image"&gt;
          &lt;div class="carousel-caption"&gt;
              &lt;h3&gt;Fifth Image&lt;/h3&gt;
          &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  
    &lt;!-- Controlos --&gt;
    &lt;a class="left carousel-control" href="#mycarousel" role="button" data-slide="prev"&gt;
      &lt;span class="glyphicon glyphicon-chevron-left" aria-hidden="true"&gt;&lt;/span&gt;
      &lt;span class="sr-only"&gt;Previous&lt;/span&gt;
    &lt;/a&gt;
    &lt;a class="right carousel-control" href="#mycarousel" role="button" data-slide="next"&gt;
      &lt;span class="glyphicon glyphicon-chevron-right" aria-hidden="true"&gt;&lt;/span&gt;
      &lt;span class="sr-only"&gt;Next&lt;/span&gt;
    &lt;/a&gt;
  &lt;/div&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>