Bootstrap Image Slider Carousel not working

So I am trying to build a website using Django to show images using an image slider carousel, but the code doesn’t seem to work. I have no idea why. Instead of being a carousel the images are stacked on top of one another.

My html:

<div class="section">
    <div class="container">
    <div class="row justify-content-between">
    <div class="col-lg-7">
        <div class="img-property-slide-wrap">
        <div class="img-property-slide">
        <img src="{{ object.image1.url }}" alt="Image" class="img-fluid">
        <img src="{{ object.image2.url }}" alt="Image" class="img-fluid">
        <img src="{{ object.image3.url }}" alt="Image" class="img-fluid">
        </div>
        </div>
    </div>
    </div>
</div>

My style.css:

.img-property-slide-wrap {
  position: relative; }
  .img-property-slide-wrap .tns-outer .tns-inner {
    padding-bottom: 100px !important; }
  .img-property-slide-wrap .tns-nav {
    position: absolute;
    left: 50%;
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translateX(-50%);
    bottom: 40px;
    z-index: 2; }
    .img-property-slide-wrap .tns-nav button {
      background: none;
      border: none;
      display: inline-block;
      margin: 2px;
      position: relative; }
      .img-property-slide-wrap .tns-nav button:active, .img-property-slide-wrap .tns-nav button:focus {
        outline: none; }
      .img-property-slide-wrap .tns-nav button:before {
        position: absolute;
        content: "";
        width: 7px;
        height: 7px;
        border-radius: 50%;
        background-color: rgba(0, 0, 0, 0.2);
        right: 0;
        -webkit-transition: .3s all ease;
        -o-transition: .3s all ease;
        transition: .3s all ease; }
      .img-property-slide-wrap .tns-nav button.tns-nav-active:before {
        background-color: #1f6f8b; }