Unslider sliding image problems

Question

When I add the unslider-arrows to the unslider banner it doesn't slide properly between images. When moving to the next image it resizes the image from small to full size starting at the top of the .banner div.
* Note: It only slides like this without any user input. You can see this on the link that I have provided.

www.bravodesignbc.com

Since I am not a javascript guru I am not sure how to solve this. I don't think there is a problem with the css but I might be wrong. Here is the html and javascript for the banner and unslider-arrows

<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>    

Here is the 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;
}

Answer 1

It looks like your <script> block is improperly nested. I tried out your code and was able to get it to work by moving the javascript instantiating the unslider() out of the "banner" div like so:

<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>

        <ul>
            <li class="listBg"><h3>Slide 1</h3></li>
            <li class="listBg"><h3>Slide 2</h3></li>
            <li class="listBg"><h3>Slide 3</h3></li>
        </ul>
    </div>

</div> 

<script type="text/javascript">
    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>