Image Slideshow Using JQuery, CSS In MVC 5

Here are the steps, 

Step 1: Create a basic project MVC with Controller, Model and View:



Step 2: Include required query libraries:



Step 3: Add Div multiple images as below:

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

Step 4: Add CSS as below:

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

Step 5: Add JQuery as below:

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

Step 6: Run the project and you will find the image as slideshow as in the following:



Hope you will understand how we can change the image in specific interval automatically or next and prev button.