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.