I am facing an issue with my Django website where I am trying to display images using an image slider carousel. However, the code is not functioning as expected. Instead of a carousel, the images are appearing stacked on top of each other.
https://i.sstatic.net/O0qom.png
This is my HTML code:
<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>
This is my style.css code:
.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; }