jQuery 3D Content Image Slider in ASP.NET MVC

• Download source code from GitHub

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.

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.

In the _Layout.cshtml page, reference the Adaptor 3D slider 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

Responsive Output

You can download the source code from GitHub.

The post jQuery 3D Content Image Slider in ASP.NET MVC appeared first on Venkat Baggu Blog.