I created a html page to test bootstrap 5 carousel. It displays multiple items and have prev and next controls outside of slide images. The controls are using glyphicon-chevron-left and glphicon-chevron-right provided by bootstrap. The CSS is used to specify control positions. I run into problem of unable to position "next" control correctly. Instead of on the right of the last slides, it is actually displayed on the first slide, not far from Prev control. How should I change the CSS style to fix the problem?
Here is my test program:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Modymix Website Prototype</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-4bw+/aepP/YC94hEpVNVgiZdgIC5+VKNBQNGCHeKRQN+PtmoHDEXuppvnDJzQIu9" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<style>
@media (max-width: 767px)
{
.carousel-inner .carousel-item >div
{
display: none
}
.carousel-inner .carousel-item >div:first-child
{
display: block
}
}
.carousel-inner .carousel-item.active, .carousel-inner .carousel-item-next, .carousel-inner .carousel-item-prev
{
display: flex
}
@media (min-width: 768px)
{
.carousel-inner .carousel-item-end.active, .carousel-inner .carousel-item-next
{
transform: translateX(25%)
}
.carousel-inner .carousel-item-start.active, .carousel-inner .carousel-item-prev
{
transform: translateX(-25%)
}
}
.carousel-inner .carousel-item-end, .carousel-inner .carousel-item-start
{
transform: translateX(0)
}
.carousel-control-next-icon
{
right: -30px;
}
.carousel-control-prev-icon
{
right: -30px;
}
/* Adjusted control positioning and styling */
.carousel-control-prev,
.carousel-control-next {
position: absolute;
top: 50%;
transform: translateY(-50%);
}
.carousel-control-prev, .glyphicon glyphicon-chevron-left {
left: -75px;
}
.carousel-control-next, .glyphicon glyphicon-chevron-right {
right: -75px;
}
.card
{
border-style: none;
}
</style>
</head>
<body>
<div class="container text-center my-3">
<h2 class="font-weight-light mb-3">Learning Center Category List</h2>
<div class="row mx-auto my-auto justify-content-center">
<div id="recipeCarousel" class="carousel slide" >
<div class="carousel-inner" role="listbox">
<div class="carousel-item active">
<div class="col-md-3">
<div class="card">
<div class="card-img text-center">
<img src="/images/learning/HealthDieNoBackgroundt0911-2023.jpg"
width="250" height="96">
</div>
<!-- <div class="card-img-overlay">Slide 1</div> -->
</div>
</div>
</div>
<div class="carousel-item">
<div class="col-md-3">
<div class="card">
<div class="card-img">
<img src="/images/learning/carbManagementNoBackground911-2023.jpg"
width="250" height="96">
</div>
<!-- <div class="card-img-overlay">Slide 2</div> -->
</div>
</div>
</div>
<div class="carousel-item">
<div class="col-md-3">
<div class="card">
<div class="card-img">
<img src="/images/learning/knowDiabetesCatalog.png"
width="250" height="96" >
</div>
<!-- <div class="card-img-overlay">Slide 3</div> -->
</div>
</div>
</div>
<div class="carousel-item">
<div class="col-md-3">
<div class="card">
<div class="card-img">
<img src="/images/learning/ResearchUpdateNobackground0911-2023.jpg"
width="250" height="96" >
</div>
<!-- <div class="card-img-overlay">Slide 4</div> -->
</div>
</div>
</div>
<div class="carousel-item">
<div class="col-md-3">
<div class="card">
<div class="card-img">
<img src="/images/learning/LearningCatalog_new.jpg"
width="250" height="96">
</div>
<div class="card-img-overlay fw-bold" style="color: white"">Catalog 5</div>
</div>
</div>
</div>
<div class="carousel-item">
<div class="col-md-3">
<div class="card">
<div class="card-img">
<img src="/images/learning/LearningCatalog_new.jpg"
width="250" height="96">
</div>
<div class="card-img-overlay fw-bold" style="color: white">Catalog 6</div>
</div>
</div>
</div>
</div>
<a class="carousel-control carousel-control-prev bg-transparent w-aut" href="#recipeCarousel"
role="button" data-bs-slide="prev">
<span class="glyphicon glyphicon-chevron-left " aria-hidden="true"
style="color: black; font-size: 25px;"></span>
</a>
<a class="carousel-control carousel-control-next bg-transparent w-aut" href="#recipeCarousel"
role="button" data-bs-slide="next">
<span class="glyphicon glyphicon-chevron-right " aria-hidden="true"
style="color: black; font-size: 25px;"></span>
</a>
</div>
</div>
<h5 class="mt-3 fw-light">advances one slide at a time</h5>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
integrity="sha384-HwwvtgBNo3bZJJLYd8oVXjrBZt8cqVSpeBNS5n7C8IVInixGAoxmnlMuBnhbgrkm" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
// carousel jquery script
let items = document.querySelectorAll('.carousel .carousel-item')
items.forEach((el) => {
const minPerSlide = 4
let next = el.nextElementSibling
for (var i=1; i<minPerSlide; i++) {
if (!next) {
// wrap carousel by using first child
next = items[0]
}
let cloneChild = next.cloneNode(true)
el.appendChild(cloneChild.children[0])
next = next.nextElementSibling
}
})
</script>
</html>
Your adjusted control positioning styling is not having any effect, since it’s overwritten by the bootstrap styles. The only thing having an effect is
transform: translateY(-50%);which is not needed if you want to have the chevrons centered vertically. Currently they pull them up to the top of the carousel.To fix your issue adhoc you can add
left: autotocarousel-control carousel-control-nextHave a look into the CSS part of the Code Snipped added below. I commented out your Adjustments and added a single line at the bottom.
explanation:
left: 0;is basically the "stronger" one when applied together withright: 0;. So to enable the right you have to neutralise the left withleft: auto;in this case because theleft: 0;comes from bootstrap and can't be deleted.btw:
You have 2 versions of bootstrap included:
You may sort that out.