Bootstrap 3.1.1 Carousel not working-Twitter bootstrap

Xcart, PHP5.6, Bootstrap 3.1.1

My goal is to make a carousel that displays 3 items at a time and loops over a total of 5 items.

I’ve ensured my libraries are being called and that they are where they’re supposed to be however the carousel never initiates.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.1.1/js/bootstrap.min.js"></script>

<style type="text/css">
       .container{
         margin: 0 auto;
       } 
</style>

<div class="container">
  <div id="this-carousel-id" class="carousel slide">
    <div class="carousel-inner">
      <div class="item active">
        <img src="https://i.stack.imgur.com/ihiQ2.png" />
      </div>
      <div class="item">
        <img src="https://i.stack.imgur.com/ihiQ2.png" />
      </div>
      <div class="item">
        <img src="https://i.stack.imgur.com/ihiQ2.png" />
      </div>
      <div class="item">
        <img src="https://i.stack.imgur.com/ihiQ2.png" />
      </div>
      <div class="item">
        <img src="https://i.stack.imgur.com/ihiQ2.png" />
      </div>
   </div>
   <a class="carousel-control left" href="#this-carousel-id" data-slide="prev">&lsaquo;<    /a>     
   <a class="carousel-control right" href="#this-carousel-id" data-slide="next">&rsaquo;    </a>  
  </div>
</div>

$(document).ready(function(){
  $('.carousel').carousel({
           interval: 4000
  });
});

I’ve tried using sample code from the docs to get something to display carousel-like behavior but instead they are stacking:

I feel terrible because this question has been asked repeatedly and I’ve followed the answers but I’m stuck.