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.
jquery image slider 3d
jquery image 3d slider
In the _Layout.cshtml page, reference the Adaptor 3D slider 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()
{
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
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.
This member has not yet provided a Biography. Assume it's interesting and varied, and probably something to do with programming.