I am working with a basic Bootstrap Carousel with three slides. Before I implemented the slider, I had one static image via css background-image of its respective div. In my CSS, I was using background-size:cover, and really liked the way the image responded to different browser widths. Depending on the width of my image, I could get the important section of the image to always stay visibile and centered, while the extra width on either side was only visible on widescreen monitors as an added effect.
I want to retain that same image behavior now that I'm using Bootstrap's Carousel, but even if I assign dimensions to the slide's viewport, I still can't get my background images to show up. I currently have it set up so each slide displays a separate css class, and each one has a different background image so it can scroll between three images.
If this is not possible via background-image, it there another way to manipulate image elements so their display behavior is the same as background-size:cover?
Here's my HTML:
<div id="myCarousel" class="carousel slide">
<!-- Carousel items -->
<div class="carousel-inner">
<div class="active item ad1">
<img src="{{ STATIC_URL }}img/TestBannerAd.png">
</div>
<div class="item ad2">
<img src="{{ STATIC_URL }}img/TestBannerAd2.png">
</div>
<div class="item ad3">
<img src="{{ STATIC_URL }}img/TestBannerAd3.png">
</div>
</div>
<!-- Carousel nav -->
<a class="carousel-control left" href="#myCarousel" data-slide="prev">‹</a>
<a class="carousel-control right" href="#myCarousel" data-slide="next">›</a>
</div>
And my CSS:
#myCarousel {
width: 100%;
}
.carousel-control {
margin-top: 20px;
}
.carousel-inner {
width: 100%;
height: 400px;
}
.ad1 {
background: url(../img/TestBannerAd.png) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
.ad2 {
background: url(../img/TestBannerAd2.png) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
.ad3 {
background: url(../img/TestBannerAd3.png) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
Hopefully this isn't a stupid question and we can figure this out!
I know my response is quite late, but I just found your question through a search to do something similar. First of all, you need to remove the images from the HTML and change a bit the CSS to apply the height to all divs with class "item" inside the carousel.
Applying my modifications to your code it should be something like this:
<div id="myCarousel" class="carousel slide">
<!-- Carousel items -->
<div class="carousel-inner">
<div class="item active ad1">
<div class="carousel-caption">
<h4>First Thumbnail label</h4>
<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
</div>
</div>
<div class="item ad2">
<div class="carousel-caption">
<h4>Second Thumbnail label</h4>
<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
</div>
</div>
<div class="item ad3">
<div class="carousel-caption">
<h4>Third Thumbnail label</h4>
<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
</div>
</div>
</div>
<!-- Carousel nav -->
<a class="carousel-control left" href="#myCarousel" data-slide="prev">‹</a>
<a class="carousel-control right" href="#myCarousel" data-slide="next">›</a>
</div>
And the CSS:
#myCarousel {
width: 100%;
}
.carousel-control {
margin-top: 20px;
}
.carousel-inner .item {
width: 100%;
height: 400px;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
.ad1 {
background: url(../img/TestBannerAd.png) no-repeat center center fixed;
}
.ad2 {
background: url(../img/TestBannerAd2.png) no-repeat center center fixed;
}
.ad3 {
background: url(../img/TestBannerAd3.png) no-repeat center center fixed;
}
That's jQuery equivalent of the cover code:
$.each( jQuery('.carousel .item'), function( i, val ) {
$(this).css('background-image','url('+$(this).find('img').attr('src')+')').css('background-size','cover').find('img').css('visibility','hidden');
});
It takes image source and passes into item and then hides actual image.
Additionally you may need to hide carousel until jQuery.each completes. I suggest to do visibility:hidden hack for images on CSS level. So users won't be noticed image enlargement on bigger screens.
Just found this codepen https://codepen.io/wisnust10/pen/mPJwWv/
which uses another solution. (see css)
.item:nth-child(1) {
background: url('https://snap-photos.s3.amazonaws.com/img-thumbs/960w/HZZKGVVJ6I.jpg');
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
}
Tested this in chrome and IE and it does the trick.
Hope it can help somehow.
Using "background property" in ".item" class and "img" tags is not used
.carousel {
height: 300px;
}
.carousel-inner {
height: 100%;
}
.item {
width: 100%;
height: 100%;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-position: center;
}
/*
img {
object-fit: cover;
}
*/
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
<div id="myCarousel" class="carousel slide">
<!-- Carousel items -->
<div class="carousel-inner">
<div class="item active" style="background-image: url(https://dummyimage.com/300x200/000/fff)" >
<!-- <img src="http://placehold.it/650x450/aaa&text=Item 1" style="width: 100%; height: 100%" /> -->
</div>
<div class="item" style="background-image: url(https://dummyimage.com/600x400/000/fff)" >
<!-- <img src="http://placehold.it/350x350/aaa&text=Item 2" style="width: 100%; height: 100%" /> -->
</div>
<div class="item" style="background-image: url(https://dummyimage.com/1200x800/000/fff)" >
<!-- <img src="http://placehold.it/350x350/aaa&text=Item 3" style="width: 100%; height: 100%" /> -->
</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>
Codepen
Editor
Full view
Version of img
