Unslider не ведет себя отзывчиво

Question

Я пытаюсь сделать слайд-шоу в jquery, который позволяет адаптивный дизайн. Сначала у меня возникли некоторые проблемы, потому что я использовал изображения размером 1183*235, а затем изображения не занимают всю ширину, теперь я использую изображения 1900*235 и теперь занимаю полную ширину. Но когда я выхожу за пределы экрана, изображения не меняются. Нужно сделать что-то дополнительное, чтобы адаптивный дизайн работал с неслайдером? fluid:true недостаточно?

Это мой код работает: http://jsfiddle.net/ritz/T8JdT/1/

Мой HTML:

<div class="banner">
    <ul>
        <li style="background-image:url(imagens/image1.png)"><h2>This is a slide.</h2></li>
        <li style="background-image:url(imagens/image1.png)">This is another slide.</li>
        <li style="background-image:url(imagens/image1.png)">This is a final slide.</li>
    </ul>
</div>

</section

Мой css:

 #banner-container{width:100%; float:left;}
.banner { position: relative; overflow: auto;}
.banner li { list-style: none; background-repeat:no-repeat; }
.banner ul li { float: left; min-height:250px;}
.banner .dots { bottom: 20px; left: 0; position: absolute; right: 0;
} .banner .dots li { border: 2px solid #fff; border-radius: 6px; cursor: pointer; display: inline-block; height: 10px; margin: 0 4px; opacity: .4; text-indent: -999em; -webkit-transition: background .5s, opacity .5s; -moz-transition: background .5s, opacity .5s; transition: background .5s, opacity .5s; width: 10px; } .banner .dots li.active { background: #fff; opacity: 1; }

Мой JQuery:

<script type='text/javascript' src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="unslider/unslider.min.js"></script>
<script type="text/javascript">
    $(function() {
    $('.banner').unslider({
        dots: true,
        speed: 650,
        delay: 2000,
        fluid: true

    });
});
</script>