After creating a carousel following the guidance of this source and initially sharing it on this platform, I encountered an issue with the padding on the first image. As a solution, I removed the padding from the first image, but this caused the image to be excessively wide.
To address this, I decided to remove the padding from all the images and introduce a margin-left to create a gap.
.carousel-item img {
padding: 0;
margin-right: 1rem; /* for gap */
}
However, this adjustment resulted in a glitch when I tried to slide through the carousel.
Is there a way to add spacing between images (excluding the first and last images) without encountering this glitch?
Here is the Codepen Link: https://codepen.io/Nisharg/pen/qwajmx
$('#travelCarousel').carousel({
interval: false
});
$('#travelCarousel.carousel .carousel-item').each(function(){
let next = $(this).next();
if (!next.length) {
next = $(this).siblings(':first');
}
next.children(':first-child').clone().appendTo($(this));
for (let i=0;i<3;i++) {
next=next.next();
if (!next.length) {
next = $(this).siblings(':first');
}
next.children(':first-child').clone().appendTo($(this));
}
});<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css">
<style>
.carousel-item img {
padding: 0;
margin-right: 1rem; /* for gap */
}
.carousel-inner .carousel-item.active,
.carousel-inner .carousel-item-next,
.carousel-inner .carousel-item-prev {
display: flex;
}
.carousel-inner .carousel-item-right.active,
.carousel-inner .carousel-item-next {
transform: translateX(33.33333333%);
}
.carousel-inner .carousel-item-left.active,
.carousel-inner .carousel-item-prev {
transform: translateX(-33.33333333%);
}
.carousel-inner .carousel-item-right,
.carousel-inner .carousel-item-left {
transform: translateX(0);
}
</style>
<div class="travel__carousel">
<div id="travelCarousel" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img class="col-md-6 col-xl-4" src="https://picsum.photos/200/300?image=0" alt="img-1">
</div>
<div class="carousel-item">
<img class="col-md-6 col-xl-4" src="https://picsum.photos/200/300?image=2" alt="img-2">
</div>
<div class="carousel-item">
<img class="col-md-6 col-xl-4" src="https://picsum.photos/200/300?image=3" alt="img-3">
</div>
<div class="carousel-item">
<img class="col-md-6 col-xl-4" src="https://picsum.photos/200/300?image=4" alt="img-4">
</div>
<div class="carousel-item">
<img class="col-md-6 col-xl-4" src="https://picsum.photos/200/300?image=5" alt="img-5">
</div>
</div>
</div>
<div class="travel__arrows">
<a class="btn" href="#travelCarousel" role="button" data-slide="prev"><i class="fas fa-arrow-left"></i></a>
<a class="btn" href="#travelCarousel" role="button" data-slide="next"><i class="fas fa-arrow-right"></i></a>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>I am seeking a solution that does not involve using any third-party JS libraries like Slick.js.