I'm trying to implement the bootstrap carousel on multiple cards, and it's not working - the previous/next buttons move up and the transition is not smooth
Any ideas on how I can fix this would be appreciated.
See gif of screen and how it looks: http://www.giphy.com/gifs/tXQwy9oISoYHIHWr7A
.card {
border: none;
border-radius: 0;
box-shadow: 2px 6px 8px 0 rgba(22, 22, 26, 0.18);
}
.carousel-inner {
padding: 1em;
}
.carousel-item {
transition: transform 2s ease, opacity 0.5s ease-out;
}
.carousel-control-prev,
.carousel-control-next {
background: #2e8c9d;
opacity: 1;
width: 6vh;
height: 6vh;
border-radius: 50%;
top: 50%;
transform: translateY(-50%);
}
.carousel-control-prev span,
.carousel-control-next span {
width: 1.5rem;
height: 1.5rem;
}
@media (min-width: 577px) {
.cards-wrapper {
display: flex;
}
.card {
margin: 0 0.5em;
width: calc(100% / 3);
}
.image-wrapper {
height: 22vw;
margin: 0 auto;
}
}
@media (max-width: 576px) {
.card:not(:first-child) {
display: none;
}
}
.image-wrapper img {
max-width: 100%;
max-height: 100%;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="description" content="TBC" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Auto huren bij Pickup huren Bonaire- Pickup huren Bonaire</title>
<link
href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor"
crossorigin="anonymous"
/>
<!-- CSS only -->
<link
href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx"
crossorigin="anonymous"
/>
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@700&family=Poppins:wght@400;500;700&display=swap"
rel="stylesheet"
/>
<script
src="https://kit.fontawesome.com/5bc39eabb2.js"
crossorigin="anonymous"
></script>
<link rel="stylesheet" href="style2.css" />
</head>
<body>
<div class="container">
<div
id="carouselExampleControls"
class="carousel slide d-none d-sm-block"
data-bs-ride="carousel"
>
<div class="carousel-inner full_display">
<div class="carousel-item active">
<div class="cards-wrapper">
<div class="card">
<div class="image-wrapper">
<img
src="https://pickuphurenbonaire.com/wp-content/uploads/2022/03/IMG_3732-scaled.jpeg"
class="img-fluid"
alt="..."
/>
</div>
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">
Some quick example text to build on the card title and make
up the bulk of the card's content.
</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
<div class="card">
<div class="image-wrapper">
<img
src="https://pickuphurenbonaire.com/wp-content/uploads/2022/02/IMG_5215-scaled.jpeg"
class="img-fluid"
alt="..."
/>
</div>
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">
Some quick example text to build on the card title and make
up the bulk of the card's content.
</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
<div class="card">
<div class="image-wrapper">
<img
src="https://pickuphurenbonaire.com/wp-content/uploads/2022/02/IMG_5204-scaled.jpeg"
class="img-fluid High-deck"
alt="..."
/>
</div>
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">
Some quick example text to build on the card title and make
up the bulk of the card's content.
</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
</div>
</div>
</div>
<div class="carousel-item">
<div class="cards-wrapper">
<div class="card">
<div class="image-wrapper">
<img
src="https://pickuphurenbonaire.com/wp-content/uploads/2022/02/IMG_5204-scaled.jpeg"
class="img-fluid High-deck"
alt="..."
/>
</div>
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">
Some quick example text to build on the card title and make up
the bulk of the card's content.
</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
<div class="card">
<div class="image-wrapper">
<img
src="https://pickuphurenbonaire.com/wp-content/uploads/2021/09/IMG_1600-scaled.jpeg"
class="img-fluid"
alt="..."
/>
</div>
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">
Some quick example text to build on the card title and make up
the bulk of the card's content.
</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
<div class="card">
<div class="image-wrapper">
<img
src="https://pickuphurenbonaire.com/wp-content/uploads/2021/09/IMG_0725-scaled.jpeg"
class="img-fluid"
alt="..."
/>
</div>
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">
Some quick example text to build on the card title and make up
the bulk of the card's content.
</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
</div>
</div>
<button
class="carousel-control-prev"
type="button"
data-bs-target="#carouselExampleControls"
data-bs-slide="prev"
>
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button
class="carousel-control-next"
type="button"
data-bs-target="#carouselExampleControls"
data-bs-slide="next"
>
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
<div
id="carouselExampleControlsSmallScreen"
class="carousel slide d-sm-none"
data-bs-ride="carousel"
>
<div class="carousel-inner">
<div class="carousel-item active">
<div class="card">
<div class="image-wrapper">
<img
src="https://pickuphurenbonaire.com/wp-content/uploads/2022/03/IMG_3732-scaled.jpeg"
class="img-fluid"
alt="..."
/>
</div>
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">
Some quick example text to build on the card title and make up
the bulk of the card's content.
</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
</div>
<div class="carousel-item">
<div class="card">
<div class="image-wrapper">
<img
src="https://pickuphurenbonaire.com/wp-content/uploads/2022/02/IMG_5215-scaled.jpeg"
class="img-fluid"
alt="..."
/>
</div>
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">
Some quick example text to build on the card title and make up
the bulk of the card's content.
</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
</div>
<div class="carousel-item">
<div class="card">
<div class="image-wrapper">
<img
src="https://pickuphurenbonaire.com/wp-content/uploads/2022/02/IMG_5204-scaled.jpeg"
class="img-fluid High-deck"
alt="..."
/>
</div>
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">
Some quick example text to build on the card title and make up
the bulk of the card's content.
</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
</div>
<div class="carousel-item">
<div class="card">
<div class="image-wrapper">
<img
src="https://pickuphurenbonaire.com/wp-content/uploads/2022/02/IMG_5204-scaled.jpeg"
class="img-fluid High-deck"
alt="..."
/>
</div>
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">
Some quick example text to build on the card title and make up
the bulk of the card's content.
</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
</div>
<div class="carousel-item">
<div class="card">
<div class="image-wrapper">
<img
src="https://pickuphurenbonaire.com/wp-content/uploads/2021/09/IMG_1600-scaled.jpeg"
class="img-fluid"
alt="..."
/>
</div>
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">
Some quick example text to build on the card title and make up
the bulk of the card's content.
</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
</div>
<div class="carousel-item">
<div class="card">
<div class="image-wrapper">
<img
src="https://pickuphurenbonaire.com/wp-content/uploads/2021/09/IMG_0725-scaled.jpeg"
class="img-fluid"
alt="..."
/>
</div>
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">
Some quick example text to build on the card title and make up
the bulk of the card's content.
</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
</div>
</div>
<button
class="carousel-control-prev"
type="button"
data-bs-target="#carouselExampleControlsSmallScreen"
data-bs-slide="prev"
>
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button
class="carousel-control-next"
type="button"
data-bs-target="#carouselExampleControlsSmallScreen"
data-bs-slide="next"
>
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
</div>
<!-- JavaScript Bundle with Popper -->
<script
src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.bundle.min.js"
integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa"
crossorigin="anonymous"
></script>
</body>
</html>
