I am currently using Bootstrap 4 carousel and attempting to make it full width. It appears to be full width initially, but upon viewing it on larger screens, the subsequent sliders after the first one are displayed as well. You can try zooming out the window to see the issue.
Is there a way to rectify this problem?
Below is my code snippet:
.first-slide {
background: url("https://image.ibb.co/kvhXGH/jetty_1373173_1920.jpg");
}
.carousel-item {
height: 800px;
width: 100%;
}<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="container-fluid p-0">
<div id="carouselExampleControls" class="carousel slide" data-ride="carousel" data-interval="false">
<div class="carousel-inner" role="listbox">
<div class="carousel-item active first-slide">
<div class="row">
<div class="col-md-6 offset-md-1">
<h1>Title</h1>
<p>Text goes here</p>
</div>
<div class="col-md-5"></div>
</div>
</div>
<div class="carousel-item first-slide">
<div class="row">
<div class="col-md-6 offset-md-1">
<h1>Title</h1>
<p>Text goes here</p>
</div>
<div class="col-md-5"></div>
</div>
</div>
<div class="carousel-item first-slide">
<div class="row">
<div class="col-md-6 offset-md-1">
<h1>Title</h1>
<p>Text goeshere</p>
</div>
<div class="col-md-5"></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>
<span class="sr-only">Previous</span>
</a>
</div>
</div>