I am making a carousel and I have run into a glitch, never had this before. When it slides onto the next item, the content that comes in is aligned to the bottom and then when it's fully into the viewport, then it comes up. Can't figure out my error in this. Also, if anyone could tell why is it happening, that will also be much appreciated
<div class="container-fluid">
<div id="test-car" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#test-car" data-slide-to="0" class="active"></li>
<li data-target="#test-car" data-slide-to="1"></li>
<li data-target="#test-car" data-slide-to="2"></li>
</ol>
<div class="container">
<div class="carousel-inner">
<div class="carousel-item active clearfix">
<img class="dp float-left" src="images/5.jpg" alt="First slide">
<div class="test-bod">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsum, veniam quis totam obcaecati beatae et consequuntur dolores. ipsum dolor sit amet consectetur adipisicing elit</p>
<footer class="blockquote-footer">
<p>ABC</p>
<p class="small">Designation</p>
</footer>
</div>
</div>
<div class="carousel-item clearfix">
<img class="dp float-left" src="images/6.jpg" alt="First slide">
<div class="test-bod">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsum, veniam quis totam obcaecati beatae et consequuntur dolores. ipsum dolor sit amet consectetur adipisicing elit</p>
<footer class="blockquote-footer">
<p>DEF</p>
<p class="small">Designation</p>
</footer>
</div>
</div>
<div class="carousel-item clearfix">
<img class="dp float-left" src="images/7.jpg" alt="First slide">
<div class="test-bod">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsum, veniam quis totam obcaecati beatae et consequuntur dolores. ipsum dolor sit amet consectetur adipisicing elit</p>
<footer class="blockquote-footer">
<p>GHI</p>
<p class="small">Designation</p>
</footer>
</div>
</div>
</div>
</div>
</div>
</div>
Here is my CSS
#test-car {
height: 300px;
background: #518ff5 url('icons/1.svg') no-repeat right;
overflow: hidden;
}
#test-car .container {
position: relative;
top: 25%;
}
.carousel-inner {
height: 100%;
}
.carousel-item {
position: relative;
height: 175px;
}
.dp {
border-radius: 50%;
height: 125px;
width: 125px;
}
#test-car .carousel-inner .carousel-item .test-bod {
position: absolute;
top: 0%;
width: 70%;
margin: 0 15% !important;
font-size: 1.25rem;
color: white;
height: 100%;
}
/* #test-car .carousel-inner .carousel-item footer {
position: absolute;
bottom: 0;
left: 13%;
} */
#test-car .carousel-inner .carousel-item footer p {
position: relative;
margin-bottom: 0;
color: white;
}
.blockquote-footer:before {
content: none;
}
