Recently, I've been working on tweaking this code to make it Bootstrap 4 compatible and left aligned. However, I'm encountering two persistent issues that I can't seem to resolve:
- The right side keeps getting cut off even though I intended for it to display at 100%
- When you click on the arrow (carousel-control-prev), there's an annoying white space that appears before the other carousel items slide in
If anyone has any insights or suggestions on what might be going wrong with my code, please let me know. Here's the snippet I'm currently working with:
$(document).ready(function() {
$('#carouselExampleControls').carousel({
interval: 0
})
$('.carousel .carousel-item').each(function() {
var next = $(this).next();
if (!next.length) {
next = $(this).siblings(':first');
}
next.children(':first-child').clone().appendTo($(this));
if (next.next().length > 0) {
next.next().children(':first-child').clone().appendTo($(this));
} else {
$(this).siblings(':first').children(':first-child').clone().appendTo($(this));
}
});
});.carousel,
.carousel-inner,
.carousel-inner>.carousel-item {
overflow: hidden;
}
.carousel-inner>.carousel-item.active,
.carousel-inner>.carousel-item-next {
display: flex;
flex-wrap: nowrap;
width: auto;
}
.carousel-inner:before {
position: absolute;
top: 0;
bottom: 0;
right: 94%;
left: 0;
content: "";
display: block;
background-color: #fff;
z-index: 2;
}
.carousel-inner:after {
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 100%;
content: "";
display: block;
background-color: #fff;
z-index: 2;
}
.carousel-control-prev {
opacity: 1;
background: black;
height: 70px;
width: 70px;
top: 50%;
left: 100px;
}<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta.2/css/bootstrap.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<div class="coontainer-fluid">
<div class="col-md-7 text-center">
<div id="carouselExampleControls" class="carousel slide" data-ride="carousel" data-interval="false">
<div class="carousel-inner">
<div class="row carousel-item active">
<div class="col-5">
<div class="card">
<div class="card-body text-left d-flex flex-column justify-content-end px-4 py-5">
<div class="d-inline">
<a href="#" class="card-link">Link</a>
</div>
<h5 class="card-title">Title</h5>
<p class="card-text">Text goes here</p>
<a href="#" class="btn btn-block text-left pl-0">Button</a>
<a href="#" class="btn btn-block text-left pl-0">Button</a>
</div>
</div>
</div>
</div>
<div class="row carousel-item">
<div class="col-5">
<div class="card">
<div class="card-body text-left d-flex flex-column justify-content-end px-4 py-5">
<div class="d-inline">
<a href="#" class="card-link">Link</a>
</div>
<h5 class="card-title">Title</h5>
<p class="card-text">Text goes here</p>
<a href="#" class="btn btn-block text-left pl-0">Button</a>
<a href="#" class="btn btn-block text-left pl-0">Button</a>
</div>
</div>
</div>
</div>
<div class="row carousel-item">
<div class="col-5">
<div class="card">
<div class="card-body text-left d-flex flex-column justify-content-end px-4 py-5">
<div class="d-inline">
<a href="#" class="card-link">Link</a>
</div>
<h5 class="card-title">Title</h5>
<p class="card-text">Text goes here</p>
<a href="#" class="btn btn-block text-left pl-0">Button</a>
<a href="#" class="btn btn-block text-left pl-0">Button</a>
</div>
</div>
</div>
</div>
<div class="row carousel-item">
<div class="col-5">
<div class="card">
<div class="card-body text-left d-flex flex-column justify-content-end px-4 py-5">
<div class="d-inline">
<a href="#" class="card-link">Link</a>
</div>
<h5 class="card-title">Title</h5>
<p class="card-text">Text goes here</p>
<a href="#" class="btn btn-block text-left pl-0">Button</a>
<a href="#" class="btn btn-block text-left pl-0">Button</a>
</div>
</div>
</div>
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
</a>
</div>
</div>
</div>