Just add carousel-fade in your bootstrap class with the id of “sessionCarousel ” Heres an official example i tested your code and the transition effect works here. just run the code and try it yourself if that’s what you’re looking for
Checkout the fade transition example https://getbootstrap.com/docs/5.1/components/carousel/
Just change this change classes from transform to carousel-fade
<div id="sessionCarousel" class="carousel slide carousel-fade">
<link href="https://www.jqueryscript.net/css/jquerysctipttop.css" rel="stylesheet" type="text/css">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.14.0/css/all.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"
integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p"
crossorigin="anonymous"></script>
<style>
.card {
position: relative;
display: flex;
flex-direction: column;
min-width: 0;
word-wrap: break-word;
background-color: #fff;
background-clip: border-box;
border: 1pxsolidrgba(0,0,0,.125);
border-radius: .25rem;
margin: 10px;
}
.block-container-component .force-img-background {
background-repeat: no-repeat !important;
background-position: center !important;
background-size: 86% auto !important;
}
.parent-container {
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
}
.title-anchor {
margin-left: 3rem !important;
}
@media (min-width: 768px) {
.parent-container {
width: 750px;
}
}
@media (min-width: 992px) {
.parent-container {
width: 970px;
}
}
@media (min-width: 1200px) {
.parent-container {
width: 1170px;
}
}
@media (max-width: 767px) {
#sessionContainer .carousel-inner .carousel-item>div {
display: none;
}
#sessionContainer .carousel-inner .carousel-item>div:first-child {
display: block;
}
}
#sessionContainer .carousel-inner .carousel-item.active,
#sessionContainer .carousel-inner .carousel-item-next,
#sessionContainer .carousel-inner .carousel-item-prev {
display: flex;
}
/* medium and up screens */
@media (min-width: 768px) {
#sessionContainer .carousel-inner .carousel-item-end.active,
#sessionContainer .carousel-inner .carousel-item-next {
transform: translateX(25%);
}
#sessionContainer .carousel-inner .carousel-item-start.active,
#sessionContainer .carousel-inner .carousel-item-prev {
transform: translateX(-25%);
}
#sessionContainer .card img {
width: 98%;
}
#sessionContainer .carousel-item {
justify-content: space-between;
}
}
@media (max-width: 767px) {
#sessionContainer .card img {
width: 100%;
}
#sessionContainer .overlay {
width: 100%;
/* height: 75vh; */
}
#sessionContainer .carousel-inner .carousel-item.active,
#sessionContainer .carousel-inner .carousel-item-next,
#sessionContainer .carousel-inner .carousel-item-prev {
display: block;
}
}
.carousel-control-next,
.carousel-control-prev {
width: 22%;
}
#sessionContainer .carousel-inner .carousel-item-end,
#sessionContainer .carousel-inner .carousel-item-start {
transform: translateX(0);
}
#sessionContainer .card {
border: 0;
}
#sessionContainer .card {
position: relative;
border-radius: 1.5rem !important;
}
#sessionContainer .card .card-img-overlays {
position: absolute;
bottom: 15%;
left: 10%;
color: #fff;
font-weight: bolder;
}
#sessionContainer a {
text-decoration: none;
}
#sessionContainer .indicator {
border: 1px solid rgb(202, 202, 202);
padding: 3px 6px 3px 6px;
}
#sessionContainer .indicator:hover {
background-color: blue;
border: 1px solid blue;
transition: 200ms;
}
#sessionContainer .indicator:hover {
color: white;
transition: 200ms;
}
#sessionContainer .indicator {
color: lightgray;
}
#sessionContainer .float-end {
padding-top: 10px;
}
#sessionContainer .card-body {
background: #041E42;
color: white;
border-bottom-left-radius: 1rem;
border-bottom-right-radius: 1rem;
padding: 1.5rem 2rem !important;
}
#sessionContainer .card-img-top {
position: relative;
}
.card .main-img {
position: relative !important;
}
.card:hover .bot-text {
display: block !important;
}
.card:hover .sub-text {
display: block !important;
}
.carousel-caption {
color: #1f1818 !important;
text-align: left;
position: absolute;
right: 15%;
left: 18%;
top: 36%;
}
.top-right {
position: absolute;
right: 5%;
top: 7%;
}
.btn-know {
background: white !important;
color: black;
border-radius: 20px !important;
font-size: 1.2rem !important;
font-weight: 700 !important;
padding: .6rem 2rem !important;
margin-top: 3rem !important;
}
.line {
height: 6px;
width: 100%;
background: #2ade32;
position: absolute;
bottom: 0;
left: 2%;
}
</style>
<div class="block-container parbase section">
<div class="block-container-component full-width classic theme-blue">
<div class="mt-5 force-img-background"
style="background-image: linear-gradient(0deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 100%)
data-overlay="0">
<div class="block-container margin-bottom-0">
<div class="block-container-list top-bot-no-inside-padding left-right-">
<div class="title section">
<div class="custom-targeting-buttons "></div>
<h3 class="title-anchor left bogle-bold margin-bottom-20" data-component="title">Session
takeaway
infographics</h3>
</div>
<div class="html-component-2.0 section">
<!-- Raw HTML -->
<div class="rte-styles margin-bottom-50">
<div class="container-fluid" id="sessionContainer" style="margin:50px auto;position: relative;">
<div class="row mx-auto my-auto justify-content-center">
<div class="col-1">
<a style="color: black" class="carousel-control-prev bg-transparent w-aut" href="#sessionCarousel" role="button"
data-bs-slide="prev">PREVIOUS
<img
src=""
alt="">
</a>
</div>
<div class="col-10">
<div id="sessionCarousel" class="carousel slide carousel-fade">
<div class="carousel-inner mx-auto row w-100" role="listbox">
<div class="carousel-item active">
<div class="col-md-4">
<div class="card">
<div class="card-img-top">
<div class="line"></div>
<img
src="https://picsum.photos/200"
alt="Card image" style="width:100%">
</div>
<div class="card-body">
<h6 class="card-title">John Doe1</h6>
<p class="card-text">Some example text some example
text. </p>
<a href="#" class="btn btn-know">Know more</a>
</div>
</div>
</div>
</div>
<div class="carousel-item">
<div class="col-md-4">
<div class="card">
<div class="card-img-top">
<div class="line"></div>
<img
src="https://picsum.photos/200"
alt="Card image" style="width:100%">
</div>
<div class="card-body">
<h6 class="card-title">John Doe2</h6>
<p class="card-text">Some example text some example
text. </p>
<a href="#" class="btn btn-know">Know more</a>
</div>
</div>
</div>
</div>
<div class="carousel-item">
<div class="col-md-4">
<div class="card">
<div class="card-img-top">
<div class="line"></div>
<img
src="https://picsum.photos/200"
alt="Card image" style="width:100%">
</div>
<div class="card-body">
<h6 class="card-title">John Doe3</h6>
<p class="card-text">Some example text some example
text. </p>
<a href="#" class="btn btn-know">Know more</a>
</div>
</div>
</div>
</div>
<div class="carousel-item">
<div class="col-md-4">
<div class="card">
<div class="card-img-top">
<div class="line"></div>
<img
src="https://picsum.photos/200"
alt="Card image" style="width:100%">
</div>
<div class="card-body">
<h6 class="card-title">John Doe4</h6>
<p class="card-text">Some example text some example
text. </p>
<a href="#" class="btn btn-know">Know more</a>
</div>
</div>
</div>
</div>
<div class="carousel-item">
<div class="col-md-4">
<div class="card">
<div class="card-img-top">
<div class="line"></div>
<img
src="https://picsum.photos/200"
alt="Card image" style="width:100%">
</div>
<div class="card-body">
<h6 class="card-title">John Doe5</h6>
<p class="card-text">Some example text some example
text. </p>
<a href="#" class="btn btn-know">Know more</a>
</div>
</div>
</div>
</div>
<div class="carousel-item">
<div class="col-md-4">
<div class="card">
<div class="card-img-top">
<div class="line"></div>
<img
src="https://picsum.photos/200"
alt="Card image" style="width:100%">
</div>
<div class="card-body">
<h6 class="card-title">John Doe6</h6>
<p class="card-text">Some example text some example
text. </p>
<a href="#" class="btn btn-know">Know more</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-1">
<a style="color: black" class="carousel-control-next bg-transparent w-aut" href="#sessionCarousel" role="button"
data-bs-slide="next">NEXT
<img
src=""
alt="">
</a>
</div>
</div>
</div>
</div>
<!-- HTML Form -->
</div>
<div class="button-2-0 section">
<div class="custom-targeting-buttons "></div>
<div class="button-component-wrapper button-glms-alignment left margin-bottom-10">
<a class="button-glms-button button-primary button-ozark-noir btn-regular button-icon-alignment-left button-content"
href="" role="button">
<span>
<i class=" button-icon-alignment-left button-icon-content2 btn"></i>
Click here for more
</span>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script>
let sessions = document.querySelectorAll('#sessionContainer .carousel .carousel-item');
sessions.forEach((el) => {
const minPerSlide = 3
let next = el.nextElementSibling
for (var i = 1; i < minPerSlide; i++) {
if (!next) {
// wrap carousel by using first child
next = sessions[0]
}
let cloneChild = next.cloneNode(true)
el.appendChild(cloneChild.children[0])
next = next.nextElementSibling
}
})
$(document).ready(function () {
$('#sessionCarousel').carousel({ interval: false });
$('#sessionCarousel').carousel('pause');
})
</script>