I would like to use TwentyTwenty.js code for comparing images. It all works great except the images are aligned to the left side. How can I keep them in center without explicitly setting width on container?
<div id="beforeafter" class="twentytwenty-container">
<img src="https://lorempixel.com/800/300/sports/2/">
<img src="https://lorempixel.com/800/300/sports/3"/>
</div>
$(window).load(function() {
$("#beforeafter").twentytwenty();
});
http://codepen.io/anon/pen/EmEYjQ
If I set fixed width on container the images are in center, but I would prefer that images aren't restricted to width, with exception that they aren't wider than screen
If I use flex centering than the handle isn't in center
display: flex;
justify-content: center;
I've had an hard time on it too!
I spent a lot time on all CSS I could find to be related.
Finally... Here is a simple solution:
$(window).load(function() {
// Was there.
$("#beforeafter").twentytwenty();
// Mesure your images and divide by 2.
var imgWidth = $("#beforeafter img").width()/2;
// On the container, apply a left offset of 50% (screen center) - minus half image width.
$("#beforeafter").css({"position":"relative","left":"calc(50% - "+ imgWidth+ "px)"});
});