Вот мое решение с использованием JQuery. Обязательно обновите атрибут src каждого изображения до соответствующего значения. Я включил ссылки на большинство важных методов, которые были использованы в нижней части этого поста.
<html>
<head>
<title>Custom Carousel</title>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- CDNs -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" 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.0/umd/popper.min.js" integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js" integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm" crossorigin="anonymous"></script>
<script>
$(document).ready(function(){
// lg breakpoint that bootstrap defines is at 992px width
// Look at the Bootstrap Responsive Breakpoints page for more info
if($(window).width() <= 992)
// Look at JQuery Starts-With-Selector and Remove Documentation for more info
$("div[id^='3-slides-']").remove();
else
$("div[id^='slide-']").remove();
});
</script>
</head>
<body>
<div id="custom-carousel" class="carousel slide" data-ride="carousel">
<div class="carousel-inner" role="listbox">
<!-- First 3 slides -->
<div class="carousel-item active" id="3-slides-1">
<div class="container-fluid">
<!-- Check out Bootstrap Grid Documentation for info about rows/cols -->
<div class="row align-items-center">
<img class="col-lg-3" src="https://via.placeholder.com/940x600"/>
<img class="col-lg-6" src="https://via.placeholder.com/940x600"/>
<img class="col-lg-3" src="https://via.placeholder.com/940x600"/>
</div>
</div>
</div>
<div class="carousel-item active" id="slide-1">
<div class="container-fluid">
<div class="row align-items-center">
<img class="col-12" src="https://via.placeholder.com/940x600"/>
</div>
</div>
</div>
<div class="carousel-item" id="slide-2">
<div class="container-fluid">
<div class="row align-items-center">
<img class="col-12" src="https://via.placeholder.com/940x600"/>
</div>
</div>
</div>
<div class="carousel-item" id="slide-3">
<div class="container-fluid">
<div class="row align-items-center">
<img class="col-12" src="https://via.placeholder.com/940x600"/>
</div>
</div>
</div>
<!-- Second 3 slides -->
<div class="carousel-item" id="3-slides-2">
<div class="container-fluid">
<div class="row align-items-center">
<img class="col-lg-3" src="https://via.placeholder.com/940x600"/>
<img class="col-lg-6" src="https://via.placeholder.com/940x600"/>
<img class="col-lg-3" src="https://via.placeholder.com/940x600"/>
</div>
</div>
</div>
<div class="carousel-item" id="slide-4">
<div class="container-fluid">
<div class="row align-items-center">
<img class="col-12" src="https://via.placeholder.com/940x600"/>
</div>
</div>
</div>
<div class="carousel-item" id="slide-5">
<div class="container-fluid">
<div class="row align-items-center">
<img class="col-12" src="https://via.placeholder.com/940x600"/>
</div>
</div>
</div>
<div class="carousel-item" id="slide-6">
<div class="container-fluid">
<div class="row align-items-center">
<img class="col-12" src="https://via.placeholder.com/940x600"/>
</div>
</div>
</div>
<!-- Third 3 slides -->
<div class="carousel-item" id="3-slides-3">
<div class="container-fluid">
<div class="row align-items-center">
<img class="col-lg-3" src="https://via.placeholder.com/940x600"/>
<img class="col-lg-6" src="https://via.placeholder.com/940x600"/>
<img class="col-lg-3" src="https://via.placeholder.com/940x600"/>
</div>
</div>
</div>
<div class="carousel-item" id="slide-7">
<div class="container-fluid">
<div class="row align-items-center">
<img class="col-12" src="https://via.placeholder.com/940x600"/>
</div>
</div>
</div>
<div class="carousel-item" id="slide-8">
<div class="container-fluid">
<div class="row align-items-center">
<img class="col-12" src="https://via.placeholder.com/940x600"/>
</div>
</div>
</div>
<div class="carousel-item" id="slide-9">
<div class="container-fluid">
<div class="row align-items-center">
<img class="col-12" src="https://via.placeholder.com/940x600"/>
</div>
</div>
</div>
<!-- Carousel controls -->
<a class="carousel-control-prev" href="#custom-carousel" 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="#custom-carousel" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</body>
CodePen
Это не отзывчиво.
Если вы измените размер окна до размера мобильного представления, функция JQuery не будет вызываться; однако, если экран начинается с мобильного размера, карусель будет подходящей.
Если вам нужно обновить карусель до нужного вида во время изменения размера, я думаю, вы можете обернуть функцию изменения размера в окне вокруг основной функции JQuery, которую я использовал.
например,
$(window).resize(function() {
if( $(this).width() > width ) {
if($(window).width() <= 992)
...
else
...
}
Полезные ссылки