Во-первых, код, который вы предоставили, был довольно глючным. Я полагаю, что есть много примеров карусели онлайн, которые просто копируют и вставляют от кого-то другого, но никогда не пытаются понять код, вместо этого они продолжают добавлять больше глючного кода, чтобы решить проблему, которую они могут «увидеть», просто будьте осторожны.
Существует множество бесполезных оболочек <div> и CSS-стилей, предназначенных для исправления ошибок в поведении, что, очевидно, ухудшает процесс отладки.
Предлагаю вам сначала взглянуть на официальный документ, чтобы увидеть структуру этого компонента, а затем медленно реализовать идеи, основанные на ответах SO.
Я просто удаляю большинство из них из вашего кода только для демонстрационных целей.
Чтобы сделать его отзывчивым, я считаю, что вам нужно изменить код js, чтобы он мог заполнить карусель для разных размеров col, а также CSS. Но кажется, что для CSS-части нет простого способа обойти.
$(document).ready(function () {
$('.fdi-Carousel .carousel-item').each(function () {
var next = $(this).next();
if (!next.length) {
next = $(this).siblings(':first');
}
next.children(':first-child').clone().appendTo($(this));
//this will only work for carousel with 3 items since it only adds next() and next.next();
if (next.next().length > 0) {
next.next().children(':first-child').clone().appendTo($(this));
}
else {
$(this).siblings(':first').children(':first-child').clone().appendTo($(this));
}
});
});
.carousel-control-prev-icon,
.carousel-control-next-icon {
background-color: tomato !important;
}
.fdi-Carousel .carousel-inner .active.carousel-item,
.fdi-Carousel .carousel-inner .carousel-item-next,
.fdi-Carousel .carousel-inner .carousel-item-prev {
display: flex;
}
/* 'Again 33% means col-4, in order to make it responsive or whatever you want, you have to create different translateX() for differernt col' */
.fdi-Carousel .carousel-inner .active.carousel-item-left, .fdi-Carousel .carousel-inner .carousel-item-prev {
transform: translateX(-33.33%);
}
.fdi-Carousel .carousel-inner .active.carousel-item-right, .fdi-Carousel .carousel-inner .carousel-item-next {
transform: translateX(33.33%);
}
.fdi-Carousel .carousel-inner .carousel-item-left, .fdi-Carousel .carousel-inner .carousel-item-right {
transform: translateX(0);
}
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</head>
<body>
<div class="container-fluid">
<div class="row w-100">
<div class="col">
<div id="outerCarousel" class="carousel fdi-Carousel slide" data-ride="carousel" data-interval="5000">
<div class="carousel-inner row no-gutters">
<div class="carousel-item active">
<div class="col-4 text-center">
<img src="http://placehold.it/100/4287f5/000&text=1">
</div>
</div>
<div class="carousel-item">
<div class="col-4 text-center">
<img src="http://placehold.it/100/f57b42/000&text=2">
</div>
</div>
<div class="carousel-item">
<div class="col-4 text-center">
<img src="http://placehold.it/100/42f58a/000&text=3">
</div>
</div>
<div class="carousel-item">
<div class="col-4 text-center">
<img src="http://placehold.it/100/a442f5/000&text=4">
</div>
</div>
</div>
<a class="carousel-control-prev" href="#outerCarousel" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#outerCarousel" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</div>
</div>
</body>
</html>