Проблемы со скольжением изображения

Когда я добавляю unslider-стрелки на баннер без знака, он не скользит правильно между изображениями. При переходе к следующему изображению это .banner размер изображения от малого до полного размера, начиная с верхней части div .banner.
* Примечание. Он только скользит таким образом без ввода пользователем. Вы можете увидеть это по ссылке, которую я предоставил.

www.bravodesignbc.com

Поскольку я не являюсь javascript-гуру, я не знаю, как это решить. Я не думаю, что есть проблема с css, но я могу ошибаться. Вот html и javascript для баннера и unlider-стрелок

<div id="feature">

    <div class="banner">

        <div class="buttonPrev">
         <a href="#"  class="unslider-arrow prev"><img src="images/prev.png" /></a>
        </div>
        <div class="buttonNext">
         <a href="#"  class="unslider-arrow next"><img src="images/next.png" /></a>
        </div> 

        <div class="bottomBanner">
        <h2>Serving the lower mainland<br />
        for over twenty years
        </h2>
        </div>


        <script>
        var unslider = $('.banner').unslider();

        $('.unslider-arrow').click(function() {
            var fn = this.className.split(' ')[1];

            //  Either do unslider.data('unslider').next() or .prev() depending on the className
            unslider.data('unslider')[fn]();
        });
        </script>


        <ul>
            <li><img src="images/knappen.jpg" /></li>
            <li><img src="images/closeupChandelier.jpg" /></li>
            <li class="listBg"><h3>Slide 3</h3></li>
        </ul>
    </div>

</div>    

Вот css

/*********banner********/


#feature{
    margin-top: 60px;
    margin-bottom: 60px;
    position: relative;
    height: 400px;
    width: 100%;
    background-color: #FFF;

}

.banner{
    position: relative; 
    overflow: auto; 
    margin: 0 auto;
    width: 800px;
    height: 400px;
    padding: 0px;
}

.banner ul{
    padding: 0px;
    margin: 0px;
    list-style: none;
}

.banner li { 
    padding: 0px;
    margin: 0px;
    float: left;
    height: 400px;
    width: 800px;
     }

.banner ul li img{
    padding: 0px;
    margin: 0px;
}

.buttonPrev {
    z-index: 1;
    position: absolute;
    left: 3%;
    top:180px;
    width: 35px;
    height:70px;

}

.buttonNext {
    z-index: 1;
    position: absolute;
    right: 3%;
    top:180px;
    width: 35px;
    height:70px;
}

.bottomBanner {
    position:absolute;
    z-index: 1;
    bottom: 0px;
    width: 800px;
    height: 100px;
    margin:0px;
    padding:0px;
    background-color: rgba( 255, 255, 255, 0.4);
    }

.bottomBanner h2{
    font-family: 'rockwell_stdlight', Helvetica, Arial, sans-serif;
    font-weight: lighter;
    color: #4B4D4E;
    font-size: 36px;
    padding-left: 170px;
}

.listBg{
    background:url(../images/herringbone-pattern.png);
    background-repeat: repeat;
}