In order to solve this issue, my suggestion is to utilize the images from the slideshow as the background image for each carousel-item.
CSS
.no-gutters {
margin-right: 0;
margin-left: 0;
}
.sliderCarousel {
width: 100%;
}
.sliderCarousel .carousel-item {
width: 100%;
background-position: center;
background-size: cover;
}
HTML
<!DOCTYPE html>
<html lang="en>
<head>
<title>Example of a Bootstrap 4 Website</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link
rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
/>
<link rel="stylesheet" href="./style.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-bottom">
<a class="navbar-brand" href="#">Navbar</a>
<button
class="navbar-toggler"
type="button"
data-toggle="collapse"
data-target="#collapsibleNavbar"
>
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="collapsibleNavbar">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
</ul>
</div>
</nav>
<div
id="carouselExampleIndicators"
class="carousel slide sliderCarousel"
data-ride="carousel"
>
<ol class="carousel-indicators">
<li
data-target="#carouselExampleIndicators"
data-slide-to="0"
class="active"
></li>
<li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
</ol>
<div class="carousel-inner h-100">
<div
class="carousel-item h-100 active"
style="background-image:url('https://images.unsplash.com/flagged/photo-1551706646-9c816bfbff8c?ixlib=rb-1.2.1&auto=format&fit=crop&w=1567&q=80')"
></div>
<div
class="carousel-item h-100"
style="background-image:url('https://images.unsplash.com/flagged/photo-1551706646-9c816bfbff8c?ixlib=rb-1.2.1&auto=format&fit=crop&w=1567&q=80')"
></div>
<div
class="carousel-item h-100"
style="background-image:url('https://images.unsplash.com/flagged/photo-1551706646-9c816bfbff8c?ixlib=rb-1.2.1&auto=format&fit=crop&w=1567&q=80')"
></div>
</div>
<a
class="carousel-control-prev"
href="#carouselExampleIndicators"
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="#carouselExampleIndicators"
role="button"
data-slide="next"
>
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
<div class="container">
<div class="row">
<div class="col-md-12">
Random text goes here.
</div>
</div>
</div>
<script src="./script.js"></script>
</body>
</html>
JavaScript
$(document).ready(function() {
var setCarouselHeight = function() {
$(".sliderCarousel").height(document.documentElement.clientHeight);
};
setCarouselHeight();
$(window).resize(function() {
setCarouselHeight();
});
});
Utilizing JavaScript to calculate the viewport height and adjust the carousel accordingly.
Link to Functional Fiddle