I am encountering an issue with my carousel. When I attempt to decrease the height of the carousel, the entire image is not being displayed properly (on desktop), although it works fine on mobile devices.
My goal is for the carousel not to take up the entire page. To see the output in full screen mode, please refer to the example below:
Example:
@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css');
@import url('https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css');
#carousel-example-generic .carousel-inner .item {
padding-bottom: 50%;
}
#carousel-example-generic .carousel-inner .first-item {
height: 100%;
width: 100%;
background: url('http://p1.pichost.me/i/13/1359503.jpg');
background-size: cover;
background-position: center;
}
#carousel-example-generic .carousel-inner .second-item {
height: 100%;
width: 100%;
background: url('http://all4desktop.com/data_images/1920%20x%201200/4211692-abstract-color-background-picture-8016.jpg');
background-size: cover;
background-position: center;
}
#carousel-example-generic .carousel-inner .third-item {
height: 100%;
width: 100%;
background: url('http://www.macwallhd.com/wp-content/Wallpapers/Abstract/Mac%20Wallpaper%20Spin%20The%20Apple%20Circle-575024442.jpeg');
background-size: cover;
background-position: center;
}<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<div id="carousel-example-generic" class="carousel slide slid" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
</ol>
<div class="carousel-inner" role="listbox">
<div class="item active first-item">
<div class="carousel-caption">
...
</div>
</div>
<div class="item second-item">
<div class="carousel-caption">
...
</div>
</div>
<div class="item third-item">
<div class="carousel-caption">
...
</div>
</div>
</div>
<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>