My bootstrap Carousel wont start automatically, but works fine once clicked

Question

So I am working on implementing a bootstrap carousel on my html page, but for some strange reason it doesn't start automatically, but works fine once clicked. Below is my code so I hope someone can help me. Thank you in advance!

  <div id="myCarousel" class="carousel slide" data-ride="carousel" data-interval="3000">
    <!-- Indicators -->
    <!-- <ol class="carousel-indicators">
      <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
      <li data-target="#myCarousel" data-slide-to="1"></li>
      <li data-target="#myCarousel" data-slide-to="2"></li>
    </ol> -->
  
    <!-- Wrapper for slides -->
    <div class="carousel-inner" style="margin-bottom: 20px">
      <div class="item active">
        <img src="assets/img/casinotest.jpg" alt="CasinoTest" style="width:100%;"/>
      </div>
  
      <div class="item">
        <img src="assets/img/bingotest.jpg" alt="BingoTest" style="width:100%;"/>
      </div>
  
      <div class="item">
        <img src="assets/img/casinotest.jpg" alt="CasinoTest" style="width:100%;"/>
      </div>
    </div>
  
    <!-- Left and right controls -->
    <a class="left carousel-control" href="#myCarousel" data-slide="prev">
      <span class="glyphicon glyphicon-chevron-left"></span>
      <span class="sr-only">Previous</span>
    </a>
    <a class="right carousel-control" href="#myCarousel" data-slide="next">
      <span class="glyphicon glyphicon-chevron-right"></span>
      <span class="sr-only">Next</span>
    </a>
  </div>
<div role="tabpanel" class="tab-pane fade in" id="all-games">
  <div class="container">
    <div class="row">
      <ul class="col-md-12">
        <app-game *ngFor="let game of data" [game]="game" [gameType]="gameType"></app-game>
      </ul>
    </div>
  </div>
</div>


<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<script type="text/javascript">
 $(document).ready(function () {
    $('.myCarousel').carousel({
      interval: 400
    });

    $('.myCarousel').carousel('cycle');
  });  
   
    </script>