Load Bootstrap Slider With MVC

In this article, we will learn how to create a responsive bootstrap carousel slider in MVC.

First create a new .NET MVC project and then follow the steps as given below.

Step: 1 Add the following class to fetch the content details.

public class SlideShowVM
{
     public string Content { get; set; }
     public decimal? TimeDuration { get; set; }
     public string FileExtention { get; set; }
}

Step: 2 Now, add the following code in the Controller.

public ActionResult Index()
{
   List<SlideShowVM> contentList = new List<SlideShowVM>();
   contentList = dbContent.ContentsMasters.Select(x => new SlideShowVM { Content = x.Contents, TimeDuration = x.TimeDuration, FileExtention =     x.FileExtension, }).ToList();
return View(contentList);
}

Step: 3 Click here to download plugins and add these js folder and css folder in your Content folder.

Step: 4 Create a new folder and add your contents to it. example AdsContent is my content folder.

Step: 5 Now, Add the following code to your SlideShow.cshtml file.

@model IEnumerable<LoadBootstrapSliderWithApi.Models.SlideShowVM>
@{ 
    Layout = null; 
}
<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" type="text/css" href="~/Content/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="~/Content/css/style.css">
    <link rel="stylesheet" href="~/Content/css/responsive.css">
    <link rel="icon" href="~/Content/images/fevicon.png" type="image/gif" />
    <link rel="stylesheet" href="~/Content/css/jquery.mCustomScrollbar.min.css">
    <link rel="stylesheet" href="https://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css">
    <link href="https://fonts.googleapis.com/css?family=Poppins:400,700&display=swap" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
    <link href="https://fonts.googleapis.com/css?family=Great+Vibes|Poppins:400,700&display=swap&subset=latin-ext" rel="stylesheet">
    <link rel="stylesheet" href="~/Content/css/owl.carousel.min.css">
    <link rel="stylesoeet" href="~/Content/css/owl.theme.default.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/jquery.fancybox.min.css" media="screen">
</head>
<body>
    @{
        var count = 1;
        string txtFileName = string.Empty;
    }
    <div class="banner_bg_main">
        <div class="banner_section">
            <div class="container-fluid p-0">
                <div id="myCarousel" class="carousel slide" data-ride="carousel">
                    <div class="carousel-inner" role="listbox" style="max-height:100vh ;">
                        @{
                            if (Model != null)
                            {
                                foreach (var item in Model)
                                {
                                    if (string.IsNullOrEmpty(item.FileExtention) || item.FileExtention.StartsWith("image"))
                                    {
                                        string addCls = count == 1 ? "active" : "";
                                        <div class="carousel-item @addCls  sub_banner_bg_main" style="background-image: url(/AdsContent/@item.Content);" data-interval="@item.TimeDuration" data-ContentName="@item.Content">
                                        </div>
                                    }
                                    else
                                    {
                                        string addCls = count == 1 ? "active" : "";
                                        string autoplayPrpt = count == 1 ? "autoplay" : "";
                                        <div class="carousel-item @addCls  sub_banner_bg_main" style="background-image: url();" data-interval="@item.TimeDuration" data-ContentName="@item.Content">
                                            <div class="row">
                                                <video class="cstm-video" loop @autoplayPrpt>
                                                    <source src="/AdsContent/@item.Content" type="video/mp4">
                                                </video>
                                            </div>
                                        </div>
                                    }
                                    if (count == 1)
                                    {
                                        txtFileName = item.Content;
                                    }
                                    count++;
                                }
                            }
                        }
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script src="~/Content/js/jquery.min.js"></script>
    <script src="~/Content/js/popper.min.js"></script>
    <script src="~/Content/js/bootstrap.bundle.min.js"></script>
    <script src="~/Content/js/jquery-3.0.0.min.js"></script>
    <script src="~/Content/js/plugin.js"></script>
    <script src="~/Content/js/jquery.mCustomScrollbar.concat.min.js"></script>
    <script src="~/Content/js/custom.js"></script>
</body>
</html>

Output:

Please give your valuable feedback and if you have any questions or issues about this article, please let me know.

Also, check Check Is Enum Description Contains String Value Or Not In C#?

Parth Mandaliya

Parth Mandaliya is a Web Developer and Author at TheCodeHubs. He has got his skills in working on technologies like C#, NET, .ASP.NET MVC, ASP.NET Core, CSS, Entity Framework, Bootstrap, HTML, JavaScript, ADO.NET, AJAX, JQuery, LINQ, Angular, Nhibernate, Web API, SQL Server, and different integration like PayKUN payment, RazorPay Payment, Kioware browser, BigCommerce, Overstock, Etsy, Wish, Magento, Tundra, Faire.