JQuery Carousel Control in ASP.NET MVC4 Razor

In this post, I tell you how to build Carousel control in MVC4 using Razor engine. You find plenty of websites containing code implementation related to web form architecture but on MVC framework this ratio is quite low. It is expected you have basic knowledge on what is JQuery. 

Follow these parameters to run Jquery Carousel control in MVC4.

1. You need to download the jcarousellite_1.0.1.js file. Click here to download that file. Place that file in Script folder present in root directory of your MVC4 project.

2. Add above JS script reference in RegisterBundles method of BundleConfig.cs under App_Start folder present in root directory as shown below:

bundles.Add(new ScriptBundle("~/bundles/jquerycarousel").Include(

                        "~/Scripts/jcarousellite_1.0.1.js"));

3. Add the folder in root directory of application named as "SlideImages" and add some images there which are use in Carousel control.

4. In Home Controller Action method, create a ViewBag of images present in SlideImages folder as:

public ActionResult Index()

{

   var imageList = new 

System.IO.DirectoryInfo(Server.MapPath("/SlideImages/")).GetFiles();

   ViewBag.ImageList = imageList;

   return View();

}

5. Index View of Home controller is becomes now as:

@{

    ViewBag.Title = "Index";    

}

@* Add Jquery bundle here before script tag *@

<script type="text/javascript">

  $(function () {

     

    // Add Carousel plugin to rotate images

    $(".imageSlider").jCarouselLite({

auto: 800,

speed: 800

    });

    

  });

</script>

@section featured {

    <section class="featured">

        <div class="content-wrapper">

            <hgroup class="title">

                <h2>

                  JQuery Carousel Control in MVC4 using Razor 

                   Engine!

                </h2>

            </hgroup>

        </div>

    </section>

}

@using (Html.BeginForm("Index", "Home", FormMethod.Post))

{

    @Html.AntiForgeryToken()

    @Html.ValidationSummary(true)

    <div class="imageSlider">

      <ul>

         @foreach (var item in ViewBag.ImageList)

         {

             <li>

               <img src="@Url.Content("~/SlideImages/" + item)" 

                    alt="" width="250" height="150" />

             </li>   

         }

      </ul>

    </div>

}

@* Add Jquery Carousel bundle here *@

@section Scripts {

    @Scripts.Render("~/bundles/jqueryval")

    @Scripts.Render("~/bundles/jquerycarousel")

}

This will start Carousel control to display images automatically one by one. As you see the code which is very simple and easy as compare to web forms. I hope that you get all the points to understand how it is working. Let me know if any query remains. Stay tune. :)