Help with Bootstrap & Before-After

[JustLam]

Hi, still learning the ropes of implementing open-source code, and I'm having some difficulties.
I was wondering if I could get some help implementing this code on a bootstrap site. The code is all currently resting in a div with a column class "col-xs-6" which would set the width of this div to 50%.

I was playing around with having the column classes or not as the images weren't appearing at all originally. Upon initial load with the column class, the image in the "resize" div appears at 50px.

Another odd thing I found was that the scrollbar wouldn't go all the way to the side, as seen in the following screenshot. This leaves some of the original image visible.

Oddly enough, changing the browser size "resets" things and matches the image size properly, but that isn't a solution. Any input would be very appreciated!

<div class="ba-slider col-sm-6 col-xs-12"> <img src="https://images-na.ssl-images-amazon.com/images/I/410H2zGlWpL._SY300_.jpg"> <div class="resize col-sm-6 col-xs-12"> <img src="https://seeklogo.com/images/S/Star_Wars-logo-2B2C24F703-seeklogo.com.png"> </div> <span class="handle"></span> </div>

Thanks, Justin