why does not my slider scroll images?

jQuery(document).ready(function () {

    "use strict";

    if ($('#slider-carousel').length >= 1) {
        $('#slider-carousel').caroufredsel({
            responsive: true,
            width: '100%',
            circular: true,
            prev: '#prev',
            next: '#next',

            scroll:
                {
                    items: 1,
                    duration: 500,
                    pauseOnHover: true
                },

            auto: true,

            items:
                {
                    visible:
                        {
                            min: 1,
                            max: 1
                        },

                    height: 'variable'
                }
        });
    }
});

@if(Model.VMRepositorioSlides != null)
{
<div class="slider">
    <ul class="slider-carousel">
        @foreach (Slide slide in Model.VMRepositorioSlides.GetSlides())
        {
            <li class="img">
                <a href="@Url.Action("Slide", new { idSlide= slide.IdSlide})">
                    <img class="movement" src="~/img/slider/@slide.CoverSlide" />
                    <div class="col-md-6">
                        <h3>@slide.TituloSlide</h3>
                        <p class="texto-slider">@slide.DescripcionSlide</p>
                        <p><span class="rosa-bold">@slide.SpanSlide</span></p>
                    </div>
                </a>
            </li>
        }
    </ul>
    <ul class="slider-nav">
        <li id="prev">&lt;</li>
        <li id="next">&gt;</li>
    </ul>
</div>
}