How Do I Make An Image Slider Similar To Www.Cssslider.Com Except The Images Should Be Sliding. And I Am Trying To Use Animate() On The Text. But Its Not Working.

//View code

@model IEnumerable<AML.Models.slider>

@{
    Layout = "~/Views/Shared/_Layout.cshtml";
    
}

<h2>Index</h2>
    <script src="~/Scripts/jquery-2.1.3.min.js"></script>

<style>
    #slider {
        position: relative;
        overflow: hidden;
        margin: 20px auto 0 auto;
        border-radius: 4px;
    }

        #slider ul {
            position: relative;
            margin: 0;
            padding: 0;
            height: 200px;
            list-style: none;
        }

            #slider ul li {
                position: relative;
                display: block;
                float: left;
                margin: 0;
                padding: 0;
                width: 500px;
                height: 300px;
                background: #ccc;
                text-align: center;
                line-height: 300px;
            }

    .slider_option {
        position: relative;
        margin: 10px auto;
        width: 160px;
        font-size: 18px;
    }
</style>


        <script type="text/javascript">
            
            jQuery(document).ready(function () {
                //$('li').hide();
                setInterval(function () {
                    moveRight();
                    //$('#slideText').animate({ top: '100px' },1000);
                }, 5000);
            });
                //setInterval(function () {                   
                //   ($('#slideText').animate({ top: '-100px' }),1000);
                //}, 2000);
                setInterval(function () {
            
                    $('#slideText').animate({ top: '-=100px' }, 1000, function () {                   
                        $('#slideText').css({})
                    });
                }, 1000);
            
            function moveRight() {
                $('li').show();
            var slideCount = $('#slider ul li').length;
            var slideWidth = $('#slider ul li').width();
            var slideHeight = $('#slider ul li').height();
            var sliderUlWidth = slideCount * slideWidth;

            $('#slider').css({ width: slideWidth, height: slideHeight });
            $('#slider ul').css({ width: sliderUlWidth, marginLeft: -slideWidth, });
            $('img').css({ width: slideWidth });

            $('#slider ul').animate({ left: -slideWidth }, 1000,
                function () {
                   
                    $('#slider ul li:first-child').appendTo('#slider ul');
                 
                   $('#slider ul').css('left', '');
                                     
                });
        }

</script>



        @Html.ActionLink("dropdown","dropdownlist")
     
<div id="slider">
   
    @{
        <ul id="sampleImage">
            @foreach (var a in @Model)
            {
                <li>
                    <img src="@a.imagepaths" style="position:relative" />
                    <p id="slideText" style="color:whitesmoke; z-index:5; removed:absolute; removed38%; removed35%">@a.imageText</p>
                </li>
            }
        </ul>
    }


</div>