title: Bootstrap carousel Not functional
body: <p>I'm working in Laravel 5.5 which is bundled with Bootstrap and I have my main JS file running appropriately (i.e. laravel mix compiling with all the all the js files loaded with it appropriately). However, bootstrap 3.3.7's carousel is not working at all. The transitions (slide actions) don't work and the buttons dont work at all. here's my code below</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>/**
   * First we will load all of this project's JavaScript dependencies which
   * includes Vue and other libraries. It is a great starting point when
   * building robust, powerful web applications using Vue and Laravel.
   */
  
  require('./bootstrap');
  
  require('./animations');
  
  window.Vue = require('vue');
  
  // *
  //  * Next, we will create a fresh Vue application instance and attach it to
  //  * the page. Then, you may begin adding components to this application
  //  * or customize the JavaScript scaffolding to fit your unique needs.
  
  
  Vue.component('example-component', require('./components/ExampleComponent.vue'));
  
  const app = new Vue({
    el: '.content'
  });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script type="text/javascript" src="{{ asset('js/jquery-3.2.1.min.js') }}"&gt;&lt;/script&gt;
  &lt;!-- Styles --&gt;
  &lt;link href="{{ asset('css/main.css') }}" rel="stylesheet"&gt; . .. ...
  &lt;div class="container-fluid content"&gt;
    &lt;div class="carousel slide" id="features"&gt;
      &lt;!-- Indicators --&gt;
      &lt;ol class="carousel-indicators"&gt;
        &lt;li data-target="#features" data-slide-to="0" class="active"&gt;&lt;/li&gt;
        &lt;li data-target="#features" data-slide-to="1"&gt;&lt;/li&gt;
        &lt;li data-target="#features" data-slide-to="2"&gt;&lt;/li&gt;
      &lt;/ol&gt;
      &lt;!-- Wrapper for slides --&gt;
      &lt;div class="carousel-inner"&gt;
        &lt;div class="item active"&gt;
          &lt;img src="/images/niceview.jpg"&gt;
          &lt;div class="carousel-caption"&gt;
            &lt;h4 class="carousel-header"&gt;Lorem Ipsum&lt;/h4&gt;
            &lt;p class="carousel-text"&gt;Some Lorem ipsum.&lt;/p&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="carousel-inner"&gt;
        &lt;div class="item"&gt;
          &lt;img src="/images/rear.jpg"&gt;
          &lt;div class="carousel-caption"&gt;
            &lt;h4 class="carousel-header"&gt;Dreams&lt;/h4&gt;
            &lt;p class="carousel-text"&gt;Lorem ipsum&lt;/p&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="carousel-inner"&gt;
        &lt;div class="item"&gt;
          &lt;img src="/images/view.jpg"&gt;
          &lt;div class="carousel-caption"&gt;
            &lt;h4 class="carousel-header"&gt;Dreams&lt;/h4&gt;
            &lt;p class="carousel-text"&gt;Lorem ipsum&lt;/p&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;!-- Controls --&gt;
      &lt;a class="left carousel-control" href="#features" data-slide="prev"&gt;
        &lt;span class="glyphicon glyphicon-chevron-left"&gt;&lt;/span&gt;
      &lt;/a&gt;
      &lt;a class="right carousel-control" href="#features" data-slide="next"&gt;
        &lt;span class="glyphicon glyphicon-chevron-right"&gt;&lt;/span&gt;
      &lt;/a&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>That's my js file which compiles successfully by mix and my html file. And right now I don't get any errors in the console so I have no clue as to what is wrong.</p>
  
  <p>Please help :(</p>