Image Slideshow Using JQuery, CSS In MVC 5

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.         margin50px auto;  
  4.         positionrelative;  
  5.         width200px;  
  6.         height200px;  
  7.         padding10px;  
  8.         box-shadow: 0 0 20px rgba(0000.4);  
  9.     }  
  10.       
  11.     #SlideshowImages > div {  
  12.         positionabsolute;  
  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. 


Similar Articles