I've been using Bootstrap's carousel class and it has been straightforward so far, however one problem I've had is that images of different heights cause the arrows to bounce up and down to adjust to the new height..
This is the code I'm using for my carousel:
<div id="myCarousel" class="carousel slide">
<div class="carousel-inner">
<div class="item active">
<img src="image_url_300height"/>
<div class="carousel-caption">
<h4>...</h4>
<p>...</p>
</div>
</div>
<div class="item">
<img src="image_url_700height" />
</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>
The problem is also illustrated in this jsfiddle (Admittedly not mine, I found this on a separate question while trying to solve this problem!)
My question is: How can I force the carousel to stay at a fixed height (second thumbnail in the fiddle) and center smaller images while keeping the captions and arrow in a static position relative to the carousel?
This question is related to
twitter-bootstrap
carousel
Try this (I'm using SASS):
.carousel {
max-height: 700px;
overflow: hidden;
.item img {
width: 100%;
height: auto;
}
}
You can wrap the .carousel into a .container if you wish.
If you want to have this work with images of any height and without fixing the height, just do this:
$('#myCarousel').on("slide.bs.carousel", function(){
$(".carousel-control",this).css('top',($(".active img",this).height()*0.46)+'px');
$(this).off("slide.bs.carousel");
});
You can also use this code to adjust to all carousel images.
.carousel-item{
width: 100%; /*width you want*/
height: 500px; /*height you want*/
overflow: hidden;
}
.carousel-item img{
width: 100%;
height: 100%;
object-fit: cover;
}
.className{
width: auto;
height: 200px;
max-height: 200px;
max-width:200px
object-fit: contain;
}
You can use this lines in the css file:
ul[rn-carousel] {
> li {
position: relative;
margin-left: -100%;
&:first-child {
margin-left: 0;
}
}
}
Note that the jQuery solutions that normalize height on here may break with IE.
After some testing (with Bootstrap 3) it looks like IE doesn't bother resizing images unless they're actually being rendered. If you make the window smaller, the image of the active item gets resized but the background images preserve their height, so the "tallest" height stays the same.
In my case we were only rendering images on these items, and the images were only ever a few pixels off. So I opted to style all of the images with the height of the active image. Everything else gets resized to fit the height, so keep that in mind if your aspect ratios vary a lot.
function carouselNormalization() {
var items = $('.carousel .item');
if (items.length) {
function normalizeHeights() {
let activeImageHeight = items.filter('.active').find('img').height();
items.each(function() {
$(this).find('img').css('height', activeImageHeight + 'px');
});
};
normalizeHeights();
$(window).on('resize orientationchange', function() {
items.each(function() {
$(this).find('img').removeAttr('style');
});
normalizeHeights();
});
}
}
$(window).on('load', carouselNormalization);
Include this JavaScript in your footer (after loading jQuery):
$('.item').css('min-height',$('.item').height());
The solution given earlier leads to a situation where images may be too small for the carousel box. A proper solution to the problem of bumping controls is to override Bootstraps CSS.
Original code:
.carousel-control {
top: 40%;
}
Override the variable with a fixed value inside your own stylesheet (300px worked in my design):
.carousel-control {
top: 300px;
}
Hopefully this will solve your problem.
In case someone is feverishly googling to solve the bouncing images carousel thing, this helped me:
.fusion-carousel .fusion-carousel-item img {
width: auto;
height: 146px;
max-height: 146px;
object-fit: contain;
}
Try with this jQuery code that normalize Bootstrap carousel slide heights
function carouselNormalization() {
var items = $('#carousel-example-generic .item'), //grab all slides
heights = [], //create empty array to store height values
tallest; //create variable to make note of the tallest slide
if (items.length) {
function normalizeHeights() {
items.each(function() { //add heights to array
heights.push($(this).height());
});
tallest = Math.max.apply(null, heights); //cache largest value
items.each(function() {
$(this).css('min-height', tallest + 'px');
});
};
normalizeHeights();
$(window).on('resize orientationchange', function() {
tallest = 0, heights.length = 0; //reset vars
items.each(function() {
$(this).css('min-height', '0'); //reset min-height
});
normalizeHeights(); //run it again
});
}
}
/**
* Wait until all the assets have been loaded so a maximum height
* can be calculated correctly.
*/
window.onload = function() {
carouselNormalization();
}Here is the solution that worked for me; I did it this way as the content in the carousel was dynamically generated from user-submitted content (so we could not use a static height in the stylesheet) - This solution should also work with different sized screens:
function updateCarouselSizes(){
jQuery(".carousel").each(function(){
// I wanted an absolute minimum of 10 pixels
var maxheight=10;
if(jQuery(this).find('.item,.carousel-item').length) {
// We've found one or more item within the Carousel...
jQuery(this).carousel(); // Initialise the carousel (include options as appropriate)
// Now we iterate through each item within the carousel...
jQuery(this).find('.item,.carousel-item').each(function(k,v){
if(jQuery(this).outerHeight()>maxheight) {
// This item is the tallest we've found so far, so store the result...
maxheight=jQuery(this).outerHeight();
}
});
// Finally we set the carousel's min-height to the value we've found to be the tallest...
jQuery(this).css("min-height",maxheight+"px");
}
});
}
jQuery(function(){
jQuery(window).on("resize",updateCarouselSizes);
updateCarouselSizes();
}
Technically this is not responsive, but for my purposes the on window resize makes this behave responsively.
This jQuery function worked best for me. I'm using bootstrap 4 within a WordPress theme and I've used the full jQuery instead of jQuery slim.
// Set all carousel items to the same height
function carouselNormalization() {
window.heights = [], //create empty array to store height values
window.tallest; //create variable to make note of the tallest slide
function normalizeHeights() {
jQuery('#latest-blog-posts .carousel-item').each(function() { //add heights to array
window.heights.push(jQuery(this).outerHeight());
});
window.tallest = Math.max.apply(null, window.heights); //cache largest value
jQuery('#latest-blog-posts .carousel-item').each(function() {
jQuery(this).css('min-height',tallest + 'px');
});
}
normalizeHeights();
jQuery(window).on('resize orientationchange', function () {
window.tallest = 0, window.heights.length = 0; //reset vars
jQuery('.sc_slides .item').each(function() {
jQuery(this).css('min-height','0'); //reset min-height
});
normalizeHeights(); //run it again
});
}
jQuery( document ).ready(function() {
carouselNormalization();
});
Source:
More recently I am testing this CSS source for the Bootstrap carousel
The height set to 380 should be set equal to the biggest/tallest image being displayed...
Please Vote up/down this answer based on usability testing with the following CSS thanks.
/* CUSTOMIZE THE CAROUSEL
-------------------------------------------------- */
/* Carousel base class */
.carousel {
max-height: 100%;
max-height: 380px;
margin-bottom: 60px;
height:auto;
}
/* Since positioning the image, we need to help out the caption */
.carousel-caption {
z-index: 10;
background: rgba(0, 0, 0, 0.45);
}
/* Declare heights because of positioning of img element */
.carousel .item {
max-height: 100%;
max-height: 380px;
background-color: #777;
}
.carousel-inner > .item > img {
/* position: absolute;*/
top: 0;
left: 0;
min-width: 40%;
max-width: 100%;
max-height: 380px;
width: auto;
margin-right:auto;
margin-left:auto;
height:auto;
}
Source: Stackoverflow.com