13 Mar

jQuery 3D Content Image Slider in ASP.NET MVC

In this article we will create a Responsive jQuery 3D Content Image Slider in ASP.NET MVC using Adaptor.

You can find the plugin here http://philparsons.co.uk/demos/box-slider/

Adaptor content slider aims to provide a simple interface for developers to create cool 2D or 3D slide animation transitions.

You can download the plugin from Github

Implementation

Create a new project in ASP.NET MVC named JQueryImageSlider.

After that copy the css, img, js folders and paste  in  JQueryImageSlider project

jquery image slider 3d

jquery image slider 3d

 

jquery image 3d slider

jquery image 3d slider

In the _Layout.cshtml page reference the Adaptor 3D slider files

 

jquery image slider reference files

jquery image slider reference files

Now create class models ImageModel that holds images from database

public class ImageModel
{
    public int ImageID { get; set; }
    public string ImageName { get; set; }
    public string ImagePath { get; set; }
}

Get the images list from the repository and bind it to slider

public ActionResult Index()
{
   //Bind it from the repository
   List imageList = new List();
   imageList.Add(new ImageModel { ImageID = 1, ImageName = "Image 1", ImagePath = "/img/the-battle.jpg" });
   imageList.Add(new 
      ImageModel { ImageID = 2, ImageName = "Image 2", ImagePath = "/img/hiding-the-map.jpg" 
   });
   imageList.Add(new ImageModel { ImageID = 3, ImageName = "Image 3", ImagePath = "/img/theres-the-buoy.jpg" });
   imageList.Add(new ImageModel { ImageID = 4, ImageName = "Image 4", ImagePath = "/img/finding-the-key.jpg" });
   imageList.Add(new ImageModel { ImageID = 5, ImageName = "Image 5", ImagePath = "/img/lets-get-out-of-here.jpg"});
   return View(imageList);
}

In the View page add the following code

 <div id="viewport-shadow">
    <a href="#" id="prev" title="go to the next slide"></a>
    <a href="#" id="next" title="go to the next slide"></a>
    <div id="viewport">
        <div id="box">
            @*Bind images here*@
            @foreach (var item in Model)
            {
                <figure class="slide">
                    <img src=@item.ImagePath>
                </figure>
            }


        </div>
    </div>
    <div id="time-indicator"></div>
</div>

@* here we are binding the slider controls navigation *@
<footer>
    <nav class="slider-controls">
        <ul id="controls">
            @{int index = 0;}
            @foreach (var item in Model)
            {
                
                 string cssClass = index.Equals(0) ? "goto-slide current" : "goto-slide";

                 <li><a class="@cssClass" href=" #" data-slideindex="@index"></a></li>
                 index= index +1;
            }
          
        </ul>
    </nav>
</footer>

Adding Caption for the slider

We can add the caption for image slider using the figcaption tag.

<figure class="slide">
    <img src=@item.ImagePath class="img-responsive">
    <figcaption>Static Caption</figcaption>
</figure>

OutPut

Image Slider

Image Slider

 Responsive Output

responsive image slider

Source Code

You can download the source code from the GitHub

4 thoughts on “jQuery 3D Content Image Slider in ASP.NET MVC

    • Updated the tutorial to support responsive. I had also updated the source code in the github, re-download the source code and check now it supports the HTML5

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>