Looking to utilize the TwentyTwenty.js code for image comparison, but facing an issue where the images are aligned to the left side. Is there a way to keep them centered without explicitly setting the width on the 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
Setting a fixed width on the container centers the images, but I'd prefer not restricting their width, except ensuring they're not wider than the screen.
Tried using flex centering, but it causes the handle to not be in the center.
display: flex;
justify-content: center;