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 !important;">
                        @{
                            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: