I have a bootstrap carousel but he is automatic and manual. I wanted to change him in order to use it only manually and I want to separate the items with spaces.
This is my carousel html :
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel" style=" width:608px; height: 420px !important;">
<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">
<div class="carousel-item active">
<img src="./assets/image/Meduse-aurelie.jpg" class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="./assets/image/Merou-lanceole.jpg" class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="./assets/image/Iguane.jpg" class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="./assets/image/requin-marcheur.jpg" class="d-block w-100" alt="...">
</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>
And this is my carousel css :
.carousel-item {
margin-left: 20px;
}
I have this result :
Someone can help me please ?
Related
I am trying to fit the image inside the carousel, but I can't seem to fix it. Here is my css code:
<div id="carouselExampleIndicators" class="carousel slide" 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">
<div class="carousel-item active">
<img class="d-block w-100" src="images/Products/keyboard.jpg" alt="First slide">
<div class="carousel-caption d-md-block">
<h5 style="color:black">Welcome to LebShops</h5>
<p style="color:black">Proud to be Lebanese</p>
</div>
</div>
<div class="carousel-item">
<img class="d-block w-100" src="images/Products/mouse.jpg" alt="Second slide">
<div class="carousel-caption d-md-block">
<h5 style="color:black">Enjoy our vast selection of products</h5>
<p style="color:black">Cash on delivery</p>
</div>
</div>
<div class="carousel-item">
<img class="d-block w-100" src="images/Products/airpods.jpg" alt="Third slide">
<div class="carousel-caption d-md-block">
<h5 style="color:black">Whatever you need we got it !</h5>
<p style="color:black">Cash on delivery</p>
</div>
</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>
How can I fit my picture inside this carousel?
I've used css to adjust its height
I've checked other people's questions but it didnt help me.
Please see the below snippet. I have used different size images in the gallery.
The only change you need to add is css
img{
object-fit: cover;
vertical-align: middle;
border-style: none;
height: 70vh;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<div id="carouselExampleIndicators" class="carousel slide" 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">
<div class="carousel-item active">
<img class="d-block w-100" src="https://picsum.photos/id/100/200/250" alt="First slide">
<div class="carousel-caption d-md-block">
<h5 style="color:black">Welcome to LebShops</h5>
<p style="color:black">Proud to be Lebanese</p>
</div>
</div>
<div class="carousel-item">
<img class="d-block w-100" src="https://picsum.photos/id/100/500/300" alt="Second slide">
<div class="carousel-caption d-md-block">
<h5 style="color:black">Enjoy our vast selection of products</h5>
<p style="color:black">Cash on delivery</p>
</div>
</div>
<div class="carousel-item">
<img class="d-block w-100" src="https://picsum.photos/id/100/300/350" alt="Third slide">
<div class="carousel-caption d-md-block">
<h5 style="color:black">Whatever you need we got it !</h5>
<p style="color:black">Cash on delivery</p>
</div>
</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>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
I am trying to shorten the height to 500px from 1000px. Since this is my first time including bootstrap I have difficulty understanding which css class affects the carousel. If you can give me tips or a guide it would be much appreciated
Code
This is set to a max-width of 500px.
Here it is in a Codepen, too.
$('.carousel').carousel({
interval: 2000
})
.carousel-item {
max-height: 500px;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.2.1/js/bootstrap.bundle.min.js"></script>
<div id="carouselExampleIndicators" class="carousel slide" 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">
<div class="carousel-item active">
<img class="d-block w-100" src="http://placeimg.com/1920/1080/1" alt="First slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="http://placeimg.com/1920/1080/2" alt="Second slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="http://placeimg.com/1920/1080/3" alt="Third slide">
</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>
I am building a website with bootstrap and I added a carousel to show some pictures, but I can't make them wider. I have tried to change the values of w- within tags, but all it does is show picture in full size or stay the same I want the picture to be wider by a third of its width.
<div id="myCarousel" class="carousel slide bg-inverse w-50 ml-auto mr-auto" 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>
<li data-target="#carouselExampleIndicators" data-slide-to="3"></li>
</ol>
<div class="carousel-inner" role="listbox" >
<div class="carousel-item active" >
<img class="d-block w-100" src="img\core-img\cup1.jpg" alt="First slide" >
</div>
<div class="carousel-item">
<img class="d-block w-100" src="img\core-img\cup2.jpg" alt="Second slide" >
</div>
<div class="carousel-item">
<img class="d-block w-100" src="img\core-img\cup3.jpg" alt="Third slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="img\core-img\cup4.jpg" alt="Fourth slide">
</div>
</div>
<a class="carousel-control-prev" href="#myCarousel" 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="#myCarousel" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
try to change your class from:
<div id="myCarousel" class="carousel slide bg-inverse w-50 ml-auto mr-auto" data-ride="carousel" >
to:
<div id="myCarousel" class="carousel slide" data-ride="carousel" >
I am writing code with bootstrap 4. On my carousel images there should be another image ( a nice layer on the bottom), but with the code below it appears not on the bottom of the picture, but below it. Maybe you have any ideas how to fix this?
HTML
<div id="carouselExampleIndicators" class="carousel slide" 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">
<div class="carousel-item active">
<img class="d-block w-100" src="img.img1.jpg" alt="First slide">
<img class="ex-img" src="img/img2.jpg" alt="orange-img">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="img/img2.jpg" alt="Second slide">
<img class="ex-img" src="img/img4.jpg" alt="orange-img">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="img/img5.jpg" alt="Third slide">
<img class="ex-img" src="img/img6.jpg" alt="orange-img">
</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>
CSS
.carousel .slide{
position:absolute;
}
.carousel-item img{
position:relative;
}
.ex-img{
position:relative;
}
I'm not sure what you meant though, but try changing the style like below
<style>
.carousel-item {
position: relative;
}
.ex-img {
position: absolute;
left: 0;
bottom:0;
}
</style>
I don't understand why an unexpected white background appears on top of the bootstrap 4 carousel when I apply a black background color. How can I correct this unexpected issue? You can find the example of this issue here https://codepen.io/edquijano/pen/MQxogR Thanks for your input.
<div class="carousel">
<div class="bg-dark">
<div id="carouselExampleIndicators" class="carousel slide" 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">
<div class="carousel-item active">
<img class="d-block w-100" src="images/hero.jpg" alt="First slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="images/hero.jpg" alt="Second slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="images/hero.jpg" alt="Third slide">
</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>
</div>
The carousel is enclosed in an overlay div, which comes with an opacity of 0.6. This makes the images look like they have a whitish cast over them.
You can either choose to remove the overlay div or explicity set opacity:1 on the images.
Here is the output with the overlay div removed: https://codepen.io/anon/pen/XZGevv