Carousel Slider redirects to #carousel-example-gen

I've tried following the links below but to no avail, it still somehow doesn't slide.

Trying to add carousel to webpage without redirecting

I've also tried updating my jQuery as said here.

Bootstrap Carousel Slider not working

Here's what I've been working on.

  <!-- Carousel -->
<script>
  $(document).ready(function(){
    $('.carousel').carousel({
      interval: 3000
    })
  });    
</script>  


<div style="width:60%;
            margin-left:20%;
            margin-right:20%;

">

<h1>Welcome to the GlassEngine Company Homepage</h1>

</div>

<div style="width:60%;
            margin-left:45%;
            margin-right:20%;

">
<h3>Enjoy your stay!</h3>


</div>

<div id="carousel-example-generic" class="carousel slide" data-ride="carousel" align="center">
  <!-- Indicators -->
  <ol class="carousel-indicators">
    <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
    <li data-target="#carousel-example-generic" data-slide-to="1"></li>
    <li data-target="#carousel-example-generic" data-slide-to="2"></li>
    <li data-target="#carousel-example-generic" data-slide-to="3"></li>
    <li data-target="#carousel-example-generic" data-slide-to="4"></li>
  </ol>

  <!-- Wrapper for slides -->
  <div class="carousel-inner" role="listbox">
    <div class="item active">
      <img src="<?php echo base_url() ?>/images/fslide01.jpg" alt="...">
      <div class="carousel-caption">
      <h3>Leaves</h3>
      </div>
    </div>
    <div class="item">
      <img src="<?php echo base_url() ?>/images/fslide02.jpg" alt="...">
      <div class="carousel-caption">
      Awesome Statue
      </div>
    </div>

    <div class="item">
      <img src="<?php echo base_url() ?>/images/fslide03.jpg" alt="...">
      <div class="carousel-caption">
      Horse
      </div>
    </div>
    <div class="item">
      <img src="<?php echo base_url() ?>/images/fslide04.jpg" alt="...">
      <div class="carousel-caption">
      Scenery
      </div>
    </div>
    <div class="item">
      <img src="<?php echo base_url() ?>/images/fslide05.jpg" alt="...">
      <div class="carousel-caption">
      Animals
      </div>
    </div>

  </div>

  <!-- Controls -->
  <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

I also have the following code in my <head> tag

<!-- Latest compiled and minified JavaScript -->
<script src="<?php echo base_url() ?>/js/bootstrap.min.js"></script>
<script src="<?php echo base_url() ?>/js/jquery-2.1.4.min.js"> </script>
    <!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="<?php echo base_url() ?>/css/bootstrap.min.css">

<!-- Optional theme -->
<link rel="stylesheet" href="<?php echo base_url() ?>/css/bootstrap-theme.min.css">

I have also tried removing the / after the echo, but still no different.

<!-- Latest compiled and minified JavaScript -->
<script src="<?php echo base_url() ?>js/bootstrap.min.js"></script>
<script src="<?php echo base_url() ?>js/jquery-2.1.4.min.js"> </script>
    <!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="<?php echo base_url() ?>css/bootstrap.min.css">

<!-- Optional theme -->
<link rel="stylesheet" href="<?php echo base_url() ?>css/bootstrap-theme.min.css">

So it turns out I was loading bootstrap before jquery. So the proper code would be this:

<!-- Latest compiled and minified JavaScript -->
<script src="<?php echo base_url() ?>/js/jquery-2.1.4.min.js"> </script>
<script src="<?php echo base_url() ?>/js/bootstrap.min.js"></script>

Case Closed.