jssor slider leaving line on side and scaling when not needed

Question

I am using jssor slider for a slideshow which works fine in IE11 and Firefox. However in Chrome, it leaves a dark vertical line on the right edge of some (but not all) of the images. It also, on random startups, resizes the pictures to make them too large. The pictures are are stored at 335x260 px and the width of the slider is set at 335px. This is crazy, I don't see where the problem is coming from and I am using their code for most of it. My guess is a simple error, but I can't see it, and have been looking for literally days while doing other parts. Here is the code and the css:

#PhotoShow {
clear: both;
float: left;
height: 260px;
width: 335px;
display: block;
margin-left: 0;
}

<div id="PhotoShow" >
    <div id="slider1_container" style="position: relative; width: 335px;">
    <!-- Slides Container -->  
    <div data-u="slides" style="cursor: move;  position: absolute; width: 335px; height: 260px; overflow: hidden;">
    <div><img data-u="image" src="photos/4JoeBonamassa.jpg" </div>
        <div><img data-u="image" src="photos/4WarrenHaynes.jpg" ></div>
        <div><img data-u="image" src="photos/4JeffBeck.jpg" ></div>
        <div><img data-u="image" src="photos/4LeePomeroy.jpg"></div>
    </div>

<!-- ---------------------  -->

</div>
</div>


<script type="text/javascript" async>
     jQuery(document).ready(function ($) {
        var _SlideshowTransitions = [{$Duration:700,$Opacity:2,     $Brother:{$Duration:1000,$Opacity:2}} ]; 
        var _CaptionTransitions = [];
        var startImgNumber =Math.floor((Math.random()*16)+1);
        var options = {
            $CaptionSliderOptions: {
            $Class: $JssorCaptionSlider$,
            $CaptionTransitions: _CaptionTransitions,
            $PlayInMode: 1,
            $PlayOutMode: 3},
            $AutoPlay: true,
            $DragOrientation: 1,                            
            $AutoPlayInterval: 5000,  // ADJUST!!!!
            $FillMode: 1,
            //$SlideHeight: 260,
            $LazyLoading: 2,
            //$PauseOnHover: 0,
            $StartIndex: startImgNumber,
            $SlideshowOptions: {
                $Class: $JssorSlideshowRunner$,
                $Transitions: _SlideshowTransitions,
                $TransitionsOrder: 1,
                $ShowLink: true
            }
           };
        var jssor_slider1 = new $JssorSlider$("slider1_container", options);

    function ScaleSlider() {
        var parentWidth = $('#slider1_container').parent().width();

        if (parentWidth) {
            jssor_slider1.$ScaleWidth(parentWidth);
            }
          else
            {window.setTimeout(ScaleSlider, 30);}
    }
    //Scale slider after document ready
    ScaleSlider();

    //Scale slider while window load/resize/orientationchange.
    $(window).bind("load", ScaleSlider);
    $(window).bind("resize", ScaleSlider);
    $(window).bind("orientationchange", ScaleSlider);
    //responsive code end

    });
</script>

Answer 1

Not sure what's the exact problem yet.

Please always keep 'top: 0px; left: 0px; width: ...px; height: ...px;' of the container.

And then try to set $HWA option to false.