Image Sliding In mvc using bxslider Plugins
In Controller
public ActionResult ImageSliding()
{
var uploadedFiles = new List<Sample>();
var files = Directory.GetFiles(Server.MapPath("~/Img"));
Sample uploadedFile = null;
if (files.Count() > 0)
{
foreach (var file in files)
{
var fileInfo = new FileInfo(file);
uploadedFile = new Sample() { Name = Path.GetFileName(file) };
uploadedFile.Path = ("/Img/") + Path.GetFileName(file);
uploadedFile.Size = Convert.ToString((fileInfo.Length)
/ 1000);
uploadedFiles.Add(uploadedFile);
}
uploadedFile.images =
uploadedFiles;
}
return View(uploadedFile);
}
In view
@model
JQGridExample.Models.Sample
@{
ViewBag.Title = "ImageSliding";
}
<h2>ImageSliding</h2>
<!doctype html>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script>
$(function () {
$(document).ready(function () {
$('.bxslider').bxSlider({
auto:true,
autoControls: true, mode: 'fade'
});
});
});
</script>
</head>
<body>
<ul class="bxslider" >
@foreach(var item in Model.images)
{
<li><img src="@item.Path" /></li>
}
</ul>
</body>
</html>
<link href="~/Content/css/jquery.bxslider.css" rel="stylesheet" />
<script src="~/Content/js/jquery.bxslider.min.js"></script>
No comments:
Post a Comment