Bootstrap 3.1.1 Carousel not working - html

Question

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">‹< /a>
<a class="carousel-control right" href="#this-carousel-id" data-slide="next">› </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.

Answer 1

From the snippet you're showing, you have to put your javascript into <script>...</script> tags, be sure that your cdns are using https and not http.
You also forgot to add bootstrap.min.css:
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">

Answer 2

Use the https://... instead of the http://...
https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/js/bootstrap.min.js