Image slider: maintaining equal height for all images while keeping slider responsive
It can be specified in css.
Example,
http://jsfiddle.net/AwBLL/2/
.owl-carousel .owl-item{
height:285px;
width:100%;
}
EDIT
The following solution uses the plugin's callback events to modify the viewport's/wrapper's height according to the smallest image height.
http://jsfiddle.net/DNMpF/1/
js
$(document).ready(function () {
$("#owl-example").owlCarousel({
afterUpdate: function () {
updateSize();
},
afterInit:function(){
updateSize();
}
});
function updateSize(){
var minHeight=parseInt($('.owl-item').eq(0).css('height'));
$('.owl-item').each(function () {
var thisHeight = parseInt($(this).css('height'));
minHeight=(minHeight<=thisHeight?minHeight:thisHeight);
});
$('.owl-wrapper-outer').css('height',minHeight+'px');
}
});
css
.owl-carousel .owl-item img {
height:auto;
width:100%;
display: block;
}
.owl-carousel .item {
margin:0px;
}
EDIT2
Regarding the latest comment, to show the bottom part of the large images one approach could be to iterate the images and add a negative top margin equal to the part of these images hidden.
function updateSize(){
var minHeight=parseInt($('.owl-item').eq(0).css('height'));
$('.owl-item').each(function () {
var thisHeight = parseInt($(this).css('height'));
minHeight=(minHeight<=thisHeight?minHeight:thisHeight);
});
$('.owl-wrapper-outer').css('height',minHeight+'px');
/*show the bottom part of the cropped images*/
$('.owl-carousel .owl-item img').each(function(){
var thisHeight = parseInt($(this).css('height'));
if(thisHeight>minHeight){
$(this).css('margin-top',-1*(thisHeight-minHeight)+'px');
}
});
}
Centered owl-carousel where each image has the same hight and keeps its aspect ratio
If all of your images have the same height - try adding autoWidth: true:
$(document).ready(function () { $('.owl-carousel').owlCarousel({ center: true, margin:10, loop:true, autoWidth:true, items:4 })});.owl-carousel .owl-stage { height: 200px;}
.owl-carousel .owl-item { height: 100%;}
.owl-carousel .owl-item .item { height: 100%;}
.owl-carousel .owl-item img { height: 100% !important; width: auto !important; margin: 0 auto;}<link rel="stylesheet" type="text/css" href="https://owlcarousel2.github.io/OwlCarousel2/assets/owlcarousel/assets/owl.carousel.min.css"> <link rel="stylesheet" type="text/css" href="https://owlcarousel2.github.io/OwlCarousel2/assets/owlcarousel/assets/owl.theme.default.min.css"> <script type="text/javascript" src="https://owlcarousel2.github.io/OwlCarousel2/assets/vendors/jquery.min.js"></script> <script type="text/javascript" src="https://owlcarousel2.github.io/OwlCarousel2/assets/owlcarousel/owl.carousel.js"></script> <div class="loop owl-carousel owl-theme"> <div class="item"><img src="http://via.placeholder.com/320x460/ff0000/000000?text=IMG 01" /></div> <div class="item"><img src="http://via.placeholder.com/460x320/00ffff/000000?text=IMG 02" /></div> <div class="item"><img src="http://via.placeholder.com/100x80/00ff00/000000?text=IMG 03" /></div> <div class="item"><img src="http://via.placeholder.com/50x100/ff00ff/000000?text=IMG 04" /></div> <div class="item"><img src="http://via.placeholder.com/70x80/ffff00/000000?text=IMG 05" /></div> </div>Carousel Images Same Height
It's fixed by setting all the image height to 70vh.
Guess something is not working with StackOverflow Fiddle.
Check my codepen and let me know if that's what you are looking for.
$(document).ready(function() { // get all images loaded var images = $(".chair-class"); // thumbnails containers var thumbnailContainer = $("#thumbnails"); var iframe1 = $('#sketchfab-iframe-1')[0]; var iframe2 = $('#sketchfab-iframe-2')[0]; var player1 = $f(iframe1); var player2 = $f(iframe2); // generate thumbnail images generateThumbnails(images, thumbnailContainer); // listeners for controls arrows $(".prev-next-button").on("click", function() { player1.api('pause'); player2.api('pause'); // get the images var currentImageIndex = images.index($(".chair-class[data-active=true]")); var isPrevious = $(this).hasClass("previous"); var nextIndex; if (isPrevious) { if (currentImageIndex === 0) { nextIndex = images.length - 1; }
if (currentImageIndex > 0) { nextIndex = currentImageIndex - 1; } } else { if (currentImageIndex === images.length - 1) { nextIndex = 0; }
if (currentImageIndex < images.length - 1) { nextIndex = currentImageIndex + 1; } }
// remove any active class from images images.removeClass("active").attr('data-active', "false"); // get the next active image and add active class to that next current image var $nextImage = $(images[nextIndex]); var iframeId = $nextImage.data('iframe'); if (iframeId) { $(images[nextIndex]).attr('data-active', "true"); $('.sketchfab-iframe').removeClass('active'); $('#' + iframeId).addClass('active'); } else { $(images[nextIndex]).addClass("active").attr('data-active', "true"); $('.sketchfab-iframe').removeClass('active'); } });
$(".thumb").on("click", function(event) { event.preventDefault(); var images = $(".chair-class"); var indexSelected = $(this).data("img-index"); var currentShown = images.index($(".chair-class[data-active=true]")); if (currentShown === indexSelected) return false; player1.api('pause'); player2.api('pause'); images.removeClass("active").attr('data-active', "false"); var iframeId = $(this).data('iframe'); if (iframeId) { $(images[indexSelected]).attr('data-active', "true"); $('.sketchfab-iframe').removeClass('active'); $('#' + iframeId).addClass('active'); } else { images.removeClass("active"); $(images[indexSelected]).addClass('active').attr('data-active', "true");; $('.sketchfab-iframe').removeClass('active'); } });
function generateThumbnails(images, container) { var ul = $("<ul>"); images.each(function(index, element) { var currentThumb = $("<img>"); var li = $("<li>"); var src = $(this).attr("src"); currentThumb.attr("src", src); currentThumb.attr("class", "thumb"); currentThumb.data("img-index", index); var iframe = $(this).data('iframe'); if (iframe) { currentThumb.data("iframe", iframe); } li.append(currentThumb); ul.append(li); }); container.append(ul); }});* { margin: 0; padding: 0;}
body { margin: 0; padding: 0; font-size: 100%;}
/* #green-room { background: #333 !important; } */
.slideshow-container { max-width: 1000px; position: relative; margin: auto;}
#chair,.chair-class { position: absolute; width: auto; height: 100%; /* max-width: 600px; max-height: 400px; */ margin: 0 auto; display: block; top: 0; left: 0; opacity: 0; transition: opacity .5s;}
.chair-class.active { position: relative; opacity: 1;}
#prev { position: absolute; color: black; left: 0; top: 0; bottom: 0;}
#next { position: absolute; color: black; right: 0; top: 0; bottom: 0;}
#prev p,#next p { font-size: 3em;}
#imgDetail { position: relative; width: 90%; margin: 0 auto; height: 70vh; overflow: hidden;}
#imgDetail img { height: 70vh;}
#imgDetail a { text-decoration: none; display: flex; padding: 3%; justify-content: center; align-items: center;}
#imgDetail a:hover { background-color: #333; color: white; opacity: 0.5;}
#imgDetail ul { margin: 0 auto; display: block;}
#thumbnails { max-width: 1000px; display: inline-block; text-align: center;}
.thumb { width: 21%; height: auto; margin-top: 15px; cursor: pointer;}
#imgDetail li { display: inline;}
#thumbnails ul { margin: 0 auto; display: block;}
#thumbnails li { display: inline; padding-right: 2%;}
#thumbnails li:last-child { padding-right: 0;}
.sketchfab-iframe { position: absolute; top: 0; right: 0; bottom: 0; left: 0; /* top:10vh; */ height: 70vh; opacity: 0; margin: 0 auto; transition: opacity .5s; display: none;}
.sketchfab-iframe.active { opacity: 1; position: relative; display: block;}<script src="https://f.vimeocdn.com/js/froogaloop2.min.js"></script><script src="https://f.vimeocdn.com/js/froogaloop2.min.js"></script><script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><!-- Images not Owned by Me -->
<body>
<div class="slideshow-container"> <div id="imgDetail"> <img data-iframe="sketchfab-iframe-1" src="https://i.vimeocdn.com/video/682901345_640.webp" class="chair-class" data-active="true" /> <img data-iframe="sketchfab-iframe-2" src="https://i.vimeocdn.com/video/682890362_640.webp" class="chair-class" data-active="false" /> <img src="http://www.davidwightman.net/_images_landscape/Behemot/Behemot_detail_3.jpg" class="chair-class" data-active="false" />
<div class="aspect-ratio"> <iframe id="sketchfab-iframe-1" class="sketchfab-iframe active" src="https://player.vimeo.com/video/255482396" width="100%" height="400" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe> </div>
<div class="aspect-ratio"> <iframe id="sketchfab-iframe-2" class="sketchfab-iframe" src="https://player.vimeo.com/video/255473875" width="100%" height="400" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe> </div>
<!--CONTROLS--> <a href="javascript:void(0)" id="prev" class="prev-next-button previous"> <p>❬</p> </a> <a href="javascript:void(0)" id="next" class="prev-next-button next"> <p>❭</p> </a> </div>
<!--Thumbnails--> <div id="thumbnails"> </div> </div></body>Maintain image aspect ratio in carousel
The issue lays here, on bootstrap CSS:
img {
max-width: 100%;
width: auto 9;
height: auto;
vertical-align: middle;
border: 0;
-ms-interpolation-mode: bicubic;
}
Having set max-width: 100%; the image won't be any larger than the viewport. You need to override that behavior on your CSS:
.carousel img {
position: absolute;
top: 0;
left: 0;
min-width: 100%;
height: 500px;
max-width: none;
}
Note the max-width: none; added at the bottom. This is the default max-width value and unsets the limit.
Here's your fiddle updated.
Bootstrap slider image getting stretched in responsive view
I'm not sure if you already looking for this, but Bootstrap also provides a class for responsive images. Just added it to the img-tag.
HTML
<div class="slider">
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<img src="http://dreamatico.com/data_images/cat/cat-6.jpg" class="img-responsive" alt="Slider 1">
<div class="carousel-caption">
<h3>Caption Text</h3>
</div>
</div>
<div class="item">
<img src="http://dreamatico.com/data_images/cat/cat-6.jpg" class="img-responsive" alt="Slider 2">
<div class="carousel-caption">
<h3>Caption Text</h3>
</div>
</div>
<div class="item">
<img src="http://dreamatico.com/data_images/cat/cat-6.jpg" class="img-responsive" alt="Slider 3">
<div class="carousel-caption">
<h3>Caption Text</h3>
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div> <!-- Carousel -->
</div>
JavaScript
$('.carousel').carousel({
interval: 3000
})
See it also on jsfiddle.
Related Topics
How to Change the Id of a HTML Element with JavaScript
CSS Textarea That Expands as You Type Text
Passing Mouse Clicks Through an Overlaying Element <Div>
Change Iframe Src by Clicking a Link
Highcharts - Issue About Full Chart Width
Jquery .Show() Not Revealing a Div with Visibility of Hidden
IE8 Alternative to Window.Scrolly
Encoding Utf-8 When Exporting HTML Table to Excel
Calculate Position of Selected Text JavaScript/Jquery
Canvas.Todataurl() Security Error the Operation Is Insecure
Disable Spaces in Input, and Allow Back Arrow
How to Display Selected Image Without Sending Data to Server
Make a <Br> Instead of <Div></Div> by Pressing Enter on a Contenteditable
Why Doesn't JavaScript Newlines Work Inside HTML
Manually Triggering the Iphone/Ipad/Ipod Keyboard from JavaScript
How to Put Logical Operators in Document.Queryselectorall? If So, How