در ابتدا نیاز هست که شما یک پروزه MVC ایجاد کرده و یک کنترلرر مانند شکل زیر به آن اضافه کنید:

MVC with controller.jpg

و این کتاب خانه ها را اضافه کنید:

query libraries.jpg

عکس ها را مانند دستور زیر اضافه کنید :

<div id="SlideshowImages">      <div> <img src="/Content/Images/IMG_7785.jpg" height="200" width="200"> </div>  

    <div> <img src="/Content/Images/IMG_7788.jpg" height="200" width="200"> </div>  

    <div> <img src="/Content/Images/IMG_7790.jpg" height="200" width="200"> </div>  

    <div> <img src="/Content/Images/IMG_7799.jpg" height="200" width="200"> </div>  

    <div> <img src="/Content/Images/IMG_7847.jpg" height="200" width="200"> </div>  

    <div> <img src="/Content/Images/IMG_7849.jpg" height="200" width="200"> </div>  

</div>


و حالا CSS را اضافه کنید:

<style type="text/css" style="display: none !important;">      #SlideshowImages {  

        margin: 50px auto;  

        position: relative;  

        width: 200px;  

        height: 200px;  

        padding: 10px;  

        box-shadow: 0 0 20px rgba(0, 0, 0, 0.4);  

    }  

      

    #SlideshowImages > div {  

        position: absolute;  

        top: 10px;  

        left: 10px;  

        right: 10px;  

        bottom: 10px;  

    }  

</style>


در آخر نوبت اضافه کردن jQuery می باشد:

<script type="text/javascript">      $(document).ready(function()  

    {  

        $("#slideshow > div:gt(0)").hide();  

        setInterval(function()  

        {  

            $('#SlideshowImages > div:first').fadeOut(1000).next().fadeIn(1000).end(  ).appendTo('#SlideshowImages');  

        }, 3000);  

    });  

</script>


و حالا برنامه خود را اجرا کنید و از اسلایدر زیبای خود لذت ببرید...!