Post
Ask Question

Image Slide Using Bootstrap In ASP.NET MVC

Introduction

The image slide, using Bootstrap in ASP.NET MVC is called Image Carousel.

Description

The Carousel plugin is a component for cycling through the elements like a carousel (slideshow). 
 
carousel

Creates a carousel

slide

Adds sliding animation effect when transitioning from one item to the other.

carousel-inner

This class is applied on the element, which contains all the slides of the carousel.
 
item

Specifies the conent of each slide. Content can be text and images.

carousel-caption

Specifies a caption for the carousel.

carousel-indicators

Adds the dot indicators at the bottom of each slide, which indicates the current slide the user is viewing and the the total number of slides.

carousel-control

Adds the left or right buttons on the carousel to go back or forward one slide. To add left button, use left class along with carousel-control class and to add right button use right class along with carousel-control.

data-interval

Specifies the time delay in milli-seconds for transitioning from one slide to another. Set this attribute to false, if you do not want automatic sliding.

data-pause

The default value is hover. Pauses from transitioning to the next slide on hover. Set this attribute to false to stop the ability to pause on hover.

data-wrap

The default value is true, which means the carousel transitions through all the slides without stopping at the last slide. To stop at the last slide, set this attribute to false.

data-ride="carousel"

It activates the carousel. The carousel can also be manually activated by using JavaScript.
$("#carousel_Id").carousel();

data-slide-to

Specifies which slide to go to when clicked. Slide index is ZERO based.

data-slide

This attribute is added to the carousel controls (LEFT and Right buttons). For the left button, the value is "prev" and for the right button, the value is "next".
 
Steps

Create a MVC Application named SatyaMVCBootstrapImages.

Add bootstrap folder from the site, which I had already described in my previous blog.

Add 4 images in Images folder.

Add an action result method named "carousel()" in Home controller.  
  1. using System;  
  2. using System.Collections.Generic;  
  3. using System.Linq;  
  4. using System.Web;  
  5. using System.Web.Mvc;  
  6.   
  7. namespace SatyaMVCBootstrapImages.Controllers  
  8. {  
  9.     public class HomeController : Controller  
  10.     {  
  11.         //  
  12.         // GET: /Home/  
  13.   
  14.         public ActionResult Index()  
  15.         {  
  16.             return View();  
  17.         }  
  18.   
  19.         public ActionResult ModalPopUp()  
  20.         {  
  21.             return View();  
  22.         }  
  23.         public ActionResult carousel()  
  24.         {  
  25.             return View();  
  26.         }  
  27.   
  28.     }  
  29. } 
Add a view called carousel.cshtml.
  1. @{  
  2.     ViewBag.Title = "carousel";  
  3. }  
  4.   
  5. <meta name="viewport" content="width=device-width, initial-scale=1">  
  6. <title>Satyaprakash Carousel</title>  
  7. <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">  
  8.   
  9. <h2 style="background-color: Yellow;color: Blue; text-align: center; font-style: oblique">Satyaprakash's Image Carousel</h2>  
  10. <fieldset>  
  11.     <legend style="font-family:Arial Black;color:blue">Company Founder Using Image Carousel</legend>  
  12.     <div class="container">  
  13.         <div class="row">  
  14.             <div class="col-md-8 col-md-offset-2">  
  15.                 <div id="imageCarousel" class="carousel slide" data-interval="2000"  
  16.                      data-ride="carousel" data-pause="hover" data-wrap="true">  
  17.   
  18.                     <ol class="carousel-indicators">  
  19.                         <li data-target="#imageCarousel" data-slide-to="0" class="active"></li>  
  20.                         <li data-target="#imageCarousel" data-slide-to="1"></li>  
  21.                         <li data-target="#imageCarousel" data-slide-to="2"></li>  
  22.                         <li data-target="#imageCarousel" data-slide-to="3"></li>  
  23.                     </ol>  
  24.   
  25.                     <div class="carousel-inner">  
  26.                         <div class="item active">  
  27.                             <img src="Images/2.png" class="img-responsive">  
  28.                             <div class="carousel-caption">  
  29.                                 <h3></h3>  
  30.                                 <p style="font-weight: bold; color:yellow;font-size:small">Mahesh Chand's S/W Developer Community</p>  
  31.                             </div>  
  32.                         </div>  
  33.                         <div class="item">  
  34.                             <img src="Images/4.png" class="img-responsive">  
  35.                             <div class="carousel-caption">  
  36.                                 <h3></h3>  
  37.                                 <p style="font-weight: bold; color:yellow;font-size:small">Bill Gates's Software Company</p>  
  38.                             </div>  
  39.                         </div>  
  40.                         <div class="item">  
  41.                             <img src="Images/5.png" class="img-responsive">  
  42.                             <div class="carousel-caption">  
  43.                                 <h3></h3>  
  44.                                 <p style="font-weight: bold; color:yellow;font-size:small">Larry Page's Search Engine Company</p>  
  45.                             </div>  
  46.                         </div>  
  47.                         <div class="item">  
  48.                             <img src="Images/6.jpg" class="img-responsive">  
  49.                             <div class="carousel-caption">  
  50.                                 <h3></h3>  
  51.                                 <p style="font-weight: bold; color:yellow;font-size:small">Jack Dorsey's Social Networking Company</p>  
  52.                             </div>  
  53.                         </div>  
  54.                     </div>  
  55.   
  56.                     <a href="#imageCarousel" class="carousel-control left" data-slide="prev">  
  57.                         <span class="glyphicon glyphicon-hand-left"></span>  
  58.                     </a>  
  59.                     <a href="#imageCarousel" class="carousel-control right" data-slide="next">  
  60.                         <span class="glyphicon glyphicon-hand-right"></span>  
  61.                     </a>  
  62.                 </div>  
  63.   
  64.             </div>  
  65.         </div>  
  66.     </div>  
  67.     </fieldset>  
  68. <footer>  
  69.     <p style="background-color: Yellow; font-weight: bold; color:blue; text-align: center; font-style: oblique">© @DateTime.Now.ToLocalTime()</p> @*Add Date Time*@  
  70. </footer>  
  71.           
  72.         <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js">  
  73.         </script>  
  74.         <script src="bootstrap/js/bootstrap.min.js"></script> 
Here, I added the code for image slide time interval and subsequently, I added how can an image will pause slide during slide operation, which is going on.
  1. <div id="imageCarousel" class="carousel slide" data-interval="2000"  
  2. data-ride="carousel" data-pause="hover" data-wrap="true"> 
Here, I added some dot operators, which indicates the current slide the user is viewing and the the total number of slides. 
  1. <ol class="carousel-indicators">  
  2.                         <li data-target="#imageCarousel" data-slide-to="0" class="active"></li>  
  3.                         <li data-target="#imageCarousel" data-slide-to="1"></li>  
  4.                         <li data-target="#imageCarousel" data-slide-to="2"></li>  
  5.                         <li data-target="#imageCarousel" data-slide-to="3"></li>  
  6. </ol> 
Here, I added four images with image description and the classes, which were defined above. All the images should have same dimensions.
 
  
  1. <div class="carousel-inner">  
  2.     <div class="item active">  
  3.         <img src="Images/2.png" class="img-responsive">  
  4.         <div class="carousel-caption">  
  5.             <h3></h3>  
  6.             <p style="font-weight: bold; color:yellow;font-size:small">Mahesh Chand's S/W Developer Community</p>  
  7.         </div>  
  8.     </div>  
  9.     <div class="item">  
  10.         <img src="Images/4.png" class="img-responsive">  
  11.         <div class="carousel-caption">  
  12.             <h3></h3>  
  13.             <p style="font-weight: bold; color:yellow;font-size:small">Bill Gates's Software Company</p>  
  14.         </div>  
  15.     </div>  
  16.     <div class="item">  
  17.         <img src="Images/5.png" class="img-responsive">  
  18.         <div class="carousel-caption">  
  19.             <h3></h3>  
  20.             <p style="font-weight: bold; color:yellow;font-size:small">Larry Page's Search Engine Company</p>  
  21.         </div>  
  22.     </div>  
  23.     <div class="item">  
  24.         <img src="Images/6.jpg" class="img-responsive">  
  25.         <div class="carousel-caption">  
  26.             <h3></h3>  
  27.             <p style="font-weight: bold; color:yellow;font-size:small">Jack Dorsey's Social Networking Company</p>  
  28.         </div>  
  29.     </div>  
  30. </div> 
 
 
To add left button, use left class along with carousel-control class and to add right button, use right class along with carousel-control.
  1. <a href="#imageCarousel" class="carousel-control left" data-slide="prev">  
  2.                         <span class="glyphicon glyphicon-hand-left"></span>  
  3.                     </a>  
  4.                     <a href="#imageCarousel" class="carousel-control right" data-slide="next">  
  5.                         <span class="glyphicon glyphicon-hand-right"></span>  
  6.                     </a> 
Output
 
Desktop view
 
 
dot mark :
 
 
 left and right

 
 
image details
 
 
 
all 4 images
 
 
 
 
Mobile view with dot mark, left and right, image details
 
 
 
SUMMARY
  1. What is an Image Carousel.
  2. Apply In ASP.NET MVC.
  3. All the related classes and attributes.
  4. All the images shoud have the same dimensions.