Here are the steps,

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

MVC with controller

Step 2: Include required query libraries:

query libraries

Step 3: Add Div multiple images as below:
  1. <div id="SlideshowImages">
  2. <div> <img src="/Content/Images/IMG_7785.jpg" height="200" width="200"> </div>
  3. <div> <img src="/Content/Images/IMG_7788.jpg" height="200" width="200"> </div>
  4. <div> <img src="/Content/Images/IMG_7790.jpg" height="200" width="200"> </div>
  5. <div> <img src="/Content/Images/IMG_7799.jpg" height="200" width="200"> </div>
  6. <div> <img src="/Content/Images/IMG_7847.jpg" height="200" width="200"> </div>
  7. <div> <img src="/Content/Images/IMG_7849.jpg" height="200" width="200"> </div>
  8. </div>
Step 4: Add CSS as below:
  1. <style type="text/css" style="display: none !important;">
  2. #SlideshowImages {
  3. margin: 50px auto;
  4. position: relative;
  5. width: 200px;
  6. height: 200px;
  7. padding: 10px;
  8. box-shadow: 0 0 20px rgba(0, 0, 0, 0.4);
  9. }
  11. #SlideshowImages > div {
  12. position: absolute;
  13. top: 10px;
  14. left: 10px;
  15. right: 10px;
  16. bottom: 10px;
  17. }
  18. </style>
Step 5: Add JQuery as below:
  1. <script type="text/javascript">
  2. $(document).ready(function()
  3. {
  4. $("#slideshow > div:gt(0)").hide();
  5. setInterval(function()
  6. {
  7. $('#SlideshowImages > div:first').fadeOut(1000).next().fadeIn(1000).end().appendTo('#SlideshowImages');
  8. }, 3000);
  9. });
  10. </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.