2 Images display at the same time

I am using JSSOR SLIDER in my page and it works but not properly.

When the first image is displayed, some portion of the second image is also shown. How to remove that ?

<script type="text/javascript" src="js/jssor.js"></script>
    <script type="text/javascript" src="js/jssor.slider.js"></script>

   <script>
       jQuery(document).ready(function ($) {
           var options = { $AutoPlay: true };
           var jssor_slider1 = new $JssorSlider$('slider1_container', options);
       });
</script>


<div id="slider1_container" style="position: relative; top: 0px; left: 0px;  height: 400px;">
            <div u="slides" style="cursor: move; position: absolute; overflow: hidden; left: 0px; top: 0px;  height: 300px;">
                <div><img u="image" src="images/home1.jpg" /></div>
                <div><img u="image" src="images/home2.jpg" /></div>
                <div><img u="image" src="images/home3.jpg" /></div>
                <div><img u="image" src="images/home4.jpg" /></div>        
            </div>
           </div>

Can anyone help me, that 2 images are not shown at the same time.