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" >
Related
I have angular project which requires the use of bootstrap carousel of images. but it is just showing the first slide and not changing automatically or using the previous and next buttons as well.
here is my 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 height-80">
<img class="d-block w-100" src="assets/images/26.PNG" alt="First slide">
</div>
<div class="carousel-item height-80">
<img class="d-block w-100" src="assets/images/27.PNG" alt="Second slide">
</div>
<div class="carousel-item height-80">
<img class="d-block w-100" src="assets/images/28.PNG" alt="Third slide">
</div>
</div>
<span class="carousel-control-prev" data-target="#carouselExampleIndicators" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</span>
<span class="carousel-control-next" data-target="#carouselExampleIndicators" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</span>
</div>
Since the tag looks like you're using Angular you can use the component Carousel angular style ngb-carousel:
<ngb-carousel *ngIf="items" class="carousel-fade">
<ng-template ngbSlide *ngFor="let item of items">
<!-- ... -->
</ng-template>
</ngb-carousel>
The version you are using I think is the generic one in javascript which may be less compatible than this one.
You can get several ideas and examples from here:
https://ng-bootstrap.github.io/#/components/carousel/examples
https://stackblitz.com/run?file=src%2Fapp%2Fcarousel-basic.html
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 ?
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 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
<div class="container-fluid" >
<div class="row">
<section class="col-12">
<div class="">
<div class="row">
<section class="col-sm-12">
</div>
<div class="carousel slide" id="featured" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#featured" data-slide-to="0" class="active"></li>
<li data-target="#featured" data-slide-to="1"></li>
<li data-target="#featured" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block img-fluid" src="_images/Slider_1.jpg" alt="slider1">
</div>
<div class="carousel-item">
<img class="d-block img-fluid" src="_images/Slider_2.jpg" alt="slider2">
<div class="carousel-caption d-none d-md-block">
<h3>Jadon Events</h3>
<p>We organize your events like you cannot even imagine</p>
</div>
</div>
<div class="carousel-item">
<img class="d-block img-fluid" src="_images/Slider_3.jpg" alt="slider3">
</div>
</div>
<a class="carousel-control-prev" href="#featured" role="button" data-slide="prev"><span class="carousel-control-prev-icon" aria-hidden="true">
<span class="sr-only">Previous</span>
</span></a>
<a class="carousel-control-next" href="#featured" role="button" data-slide="prev"><span class="carousel-control-next-icon" aria-hidden="true">
<span class="sr-only">Next</span>
</span></a>
</div>
</section>
</div>
</div>
I have figured out how to make slider in bootstrap, but now I am stuck with full width slider.
how can I make my carousel full width? I removed container classes but it makes some scroll at bottom which is not good for responsiveness
Try the following code and change images with yours.
<div class="carousel slide" id="featured" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#featured" data-slide-to="0" class="active"></li>
<li data-target="#featured" data-slide-to="1"></li>
<li data-target="#featured" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block img-fluid" src="http://placehold.it/2100x300" alt="slider1">
</div>
<div class="carousel-item">
<img class="d-block img-fluid" src="http://placehold.it/2100x300" alt="slider2">
<div class="carousel-caption d-none d-md-block">
<h3>Jadon Events</h3>
<p>We organize your events like you cannot even imagine</p>
</div>
</div>
<div class="carousel-item">
<img class="d-block img-fluid" src="http://placehold.it/2100x300" alt="slider3">
</div>
</div>
<a class="carousel-control-prev" href="#featured" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true">
<span class="sr-only">Previous</span>
</span>
</a>
<a class="carousel-control-next" href="#featured" role="button" data-slide="prev">
<span class="carousel-control-next-icon" aria-hidden="true">
<span class="sr-only">Next</span>
</span>
</a>
</div>