Menu
There is an grey area (shown below in the image) right of the images. If I center the image inside the carousel, the grey area is evenly divided left and right of the image. Is there a way to remove this and make the carousel same size as the images.
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
.item {
max-height: 400px;
}
</style>
</head>
<body>
<!------------nav bar ---------------------->
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">HOME</a>
</div>
<ul class="nav navbar-nav">
<li><a href="#">GALLERY</a></li>
<li><a href="#">REFERENCES</a></li>
</ul>
</div>
</nav>
<!--------------Centering div --------------->
<div class="container-fluid">
<div class="row">
<div class="col-md-offset-1 col-md-10">
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<img src="http://res.cloudinary.com/dstd7egax/image/upload/v1497784186/davinciSelf_lma2vh.jpg">
</div>
<div class="item">
<img class src="http://res.cloudinary.com/dstd7egax/image/upload/v1497784193/Madonna_i9fj4t.png" alt="Chicago">
</div>
<div class="item">
<img src="http://res.cloudinary.com/dstd7egax/image/upload/v1497784183/davinciSketch_zs4fv5.jpg" alt="New York">
</div>
</div>
<!-- Left and right controls -->
<a class="left carousel-control" href="#myCarousel" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</div>
</div>
</body>
</html>Extra space
990
Based on your images is 800px wide, this rule fixes that
#myCarousel {
margin: 0 auto;
max-width: 800px;
}
Stack snippet
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
.item {
max-height: 400px;
}
#myCarousel {
margin: 0 auto;
max-width: 800px;
}
</style>
</head>
<body>
<!------------nav bar ---------------------->
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">HOME</a>
</div>
<ul class="nav navbar-nav">
<li><a href="#">GALLERY</a></li>
<li><a href="#">REFERENCES</a></li>
</ul>
</div>
</nav>
<!--------------Centering div --------------->
<div class="container-fluid">
<div class="row">
<div class="col-md-offset-1 col-md-10">
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<img src="http://res.cloudinary.com/dstd7egax/image/upload/v1497784186/davinciSelf_lma2vh.jpg">
</div>
<div class="item">
<img class src="http://res.cloudinary.com/dstd7egax/image/upload/v1497784193/Madonna_i9fj4t.png" alt="Chicago">
</div>
<div class="item">
<img src="http://res.cloudinary.com/dstd7egax/image/upload/v1497784183/davinciSketch_zs4fv5.jpg" alt="New York">
</div>
</div>
<!-- Left and right controls -->
<a class="left carousel-control" href="#myCarousel" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</div>
</div>
</body>
</html>One quick fix, add this css:
.carousel-control.right,
.carousel-control.left {
background: transparent!important;
}
The gray areas are background colors for the control buttons. Even if the image is aligned left, it is still there, it's just harder to see.
Check here
38
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
