In this article I will explain with an example, how to implement jQuery Carousel Image Gallery with Image Slider in ASP.Net MVC Razor.
The jQuery Carousel Image Gallery with Image Slider will be implemented with the help of jQuery jCarousel plugin in ASP.Net MVC Razor.
This article can also be used to populate the images from database in the jQuery Carousel Image Gallery with Image Slider.
 
 
Controller
The Controller consists of the following Action method.
Action method for handling GET operation
Inside this Action method, a Generic List of String has been built. The Generic List collection is populated with URL of some static images.
Note: The URL of images can also be saved in database and fetched into the Generic List collection.
 
This Generic List collection is ultimately returned to the View.
public class HomeController : Controller
{
    // GET: Home
    public ActionResult Index()
    {
        List<string> images = new List<string>();
        images.Add("https://static.flickr.com/66/199481236_dc98b5abb3_s.jpg");
        images.Add("https://static.flickr.com/75/199481072_b4a0d09597_s.jpg");
        images.Add("https://static.flickr.com/57/199481087_33ae73a8de_s.jpg");
        images.Add("https://static.flickr.com/77/199481108_4359e6b971_s.jpg");
        images.Add("https://static.flickr.com/58/199481143_3c148d9dd3_s.jpg");
        images.Add("https://static.flickr.com/72/199481203_ad4cdcf109_s.jpg");
        images.Add("https://static.flickr.com/58/199481218_264ce20da0_s.jpg");
        images.Add("https://static.flickr.com/69/199481255_fdfe885f87_s.jpg");
        images.Add("https://static.flickr.com/60/199480111_87d4cb3e38_s.jpg");
        images.Add("https://static.flickr.com/70/229228324_08223b70fa_s.jpg");
 
        return View(images);
    }
}
 
 
View
Inside the View, the String class is declared as IEnumerable which specifies that it will be available as a Collection.
A loop is executed over the Model to generate an HTML Unordered List which each item containing an HTML Image element and its URL is set to the value of the Model element i.e. the URL of the Image.
Finally inside the jQuery document ready event handler, the jQuery jCarousel plugin is applied to the HTML Unordered List element.
@model IEnumerable<string>
 
@{
    Layout = null;
}
 
<!DOCTYPE html>
 
<html>
<head>
    <meta name="viewport" content="width=device-width"/>
    <title>Index</title>
</head>
<body>
    <ul id="mycarousel" class="jcarousel-skin-tango">
        @foreach (string image in Model)
        {
            <li>
                <img alt=""style='height: 75px; width: 75px' src='@image'/>
            </li>
        }
    </ul>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/jcarousel/0.2.8/jquery.jcarousel.min.js"></script>
    <link href="https://cdn.jsdelivr.net/jcarousel/0.2.8/skins/tango/skin.css" rel="Stylesheet"/>
    <script type="text/javascript">
    $(function () {
        $('#mycarousel').jcarousel();
    });
    </script>
</body>
</html>
 
 
Screenshot
jQuery Carousel Image Gallery with Image Slider in ASP.Net MVC
 
 
Downloads
Download Code