Seeking assistance with customizing the carousel functionality. There seems to be some issues, and I could use a hand in resolving them.
Desired Carousel Functionality:
Automatically start playing the carousel on page load, and once it reaches the end of all slides, have it pause automatically.
I've managed to either make it play continuously or not rotate at all, but struggling to achieve the autoplay and pause combination.
Your help is greatly appreciated!
$(document).ready(function(){
$('#home-carousel').on('slid.bs.carousel', function() {
$("#home-carousel").carousel("pause");
});
});.carousel-control-prev {
bottom: 65px;
right: 50vw;
}
.carousel-control-next {
right: 0;
bottom: 65px;
}
.carousel-control-next, .carousel-control-prev {
position: absolute;
top: 0;
bottom: 0;
z-index: 2;
display: flex;
align-items: end;
justify-content: center;
width: 25%;
padding: 0;
color: #fff;
text-align: center;
background: 0 0;
border: 0;
opacity: .5;
transition: opacity .15s ease;
}
.carousel-control-prev-icon {
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath d='M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z'/%3e%3c/svg%3e");
left: 20vw;
position: absolute;
bottom: 2rem;
}
... (CSS continues)
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="9ffdf0f0ebecebedfeefdfaab1afb1ad">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="62000d0d16111610031222574c524c50">[email protected]</a>/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="home-carousel" class="carousel slide" data-bs-ride="carousel">
<div class="carousel-indicators">
... (HTML code continues)
</div>
</div>
</div>
</div>
<button class="carousel-control-prev d-block d-md-none" type="button" data-bs-target="#home-carousel" data-bs-slide="prev">
... (Additional HTML code)
</button>
</div>