No errors with Carousel, Left/Right Buttons do not function

Question

My Bootstrap Carousel Buttons are not working. Currently the first image shows and so do the buttons, however the image does not change by itself nor does it change when I press the buttons.

This is for a web application I am making, ran using Express. I've tried changing around some snippets of code but nothing makes the slides change. There are 3 images, the other 2 are not showing because they are not active, so I do have more than 1 image.

<!--Dependencies -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script language="JavaScript" type="text/javascript">
  $(document).ready(function(){
    $('.carouselExampleControls').carousel({
      interval: 3000
    })
  })
</script>  
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" href="/assets/css/main.css">

<!--Carousel Code -->
<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img class="d-block w-100" src="https://mdbootstrap.com/img/Photos/Slides/img%20(45).jpg"
        alt="First slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="https://mdbootstrap.com/img/Photos/Slides/img%20(46).jpg"
        alt="Second slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="https://mdbootstrap.com/img/Photos/Slides/img%20(47).jpg"
        alt="Third slide">
    </div>
  </div>
  <a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span> 
    <span class="sr-only">Next</span>
  </a>
</div>

I expect to have the Carousel buttons functioning once the page is rendered, however there are no errors in the console.

Answer 1

I just found the issue, so if you are having this problem as well listen up!

You need to make sure you have an up-to-date version of Bootstrap JS and CSS.

Both versions need to be the same; I had the latest CSS but not JS.

My Carousel now functions, thank you to those who helped.