时间戳

首页 > 解决方案 > 使用 MVC 在 ASP.NET Core 中不滑动引导图像轮播

twitter-bootstrap - 使用 MVC 在 ASP.NET Core 中不滑动引导图像轮播

问题描述

我最近一直在寻找一些帮助，但没有一个能解决我的问题。我在 ASP.NET Core 中的 Web 应用程序安装了 twitter-bootstrap 和 jQuery，并且它们被正确调用。我的图像轮播位于 Index.cshtml 文件中，并使用 _Layout.cshtml 中的代码“@RenderBody()”加载具有图像轮播的 Index.cshtml 的内容。图像轮播没有滑动，我需要帮助才能让图像滑入。这是我的 Web 应用程序中两个文件的完整代码。

如何确保图像轮播在我的 Web 应用程序中滑动？提前致谢！

_Layout.cshtml

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
        <meta name="viewport" content="width=device-width"/>
        <title>ChoreBear - @ViewBag.Title</title>
        <link href="~/lib/twitter-bootstrap/css/bootstrap.css" rel="stylesheet" asp-append-version="true"/>
        <link href="~/css/Site.css" rel="stylesheet" asp-append-version="true"/>
        <link href="https://fonts.googleapis.com/css2?family=Comfortaa:wght@400;500;600;700&display=swap" rel="stylesheet" asp-append-version="true">
        <script src="https://kit.fontawesome.com/baeab757ac.js" crossorigin="anonymous" asp-append-version="true"></script>
    </head>

    <body>
        <header>
            <!--Navigation toolbar-->
            <nav class="navbar navbar-expand-lg navbar-light">
                <a class="navbar-brand" href="#">
                    <img src="~/img/logo_white.png" alt="ChoreBear Logo" title="ChoreBear"/>
                </a>
                <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarChoices">
                    <span class="navbar-toggler-icon"></span>
                </button>

                <!--List of items in the navigation toolbar-->
                <div class="collapse navbar-collapse" id="navbarChoices">
                    <ul class="navbar-nav ml-auto">
                        <li class="nav-item active">
                            <a class="nav-link" href="#">Home</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#">Contactless Delivery | Task</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#">Locations</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#">Services</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#">Sign up/Log in</a>
                        </li>
                        <li class="nav-item">
                            <button class="btn btn-outline-success my-2 my-sm-0" type="submit" id="BecomeATaskerBtn">Become a Tasker</button>
                        </li>
                    </ul>
                </div>
            </nav>
        </header>

        <!--COVID-19 alert jumbotron-->
        <div class="jumbotron py-8 mb-0">
           <div class="container">
               <div class="row justify-content-center">
                   <div class="col=sm-6 col-md-2 col-lg-2 col-xl-1 my-auto">
                       <a><img class="img-jumbotron mr-auto" src="~/img/prevention.png"/></a>
                   </div>
                   <div class="col-sm-9 col-md-6 col-lg-7 col-xl-6 pt-4">
                       <h4>See our latest approach towards COVID-19</h4> 
                       <a href="#"><button type="button" class="btn btn-info">Learn more</button></a>
                   </div>
               </div>
           </div> 
        </div>

        <main role="main">
            @RenderBody();
        </main>

    <!--JQuery files rendered here-->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
        <script href="~/lib/jquery/jquery.js" asp-append-version="true"></script>
        <script href="~/lib/popper.js/umd/popper.js" asp-append-version="true"></script>
        <script href="~/lib/twitter-bootstrap/css/bootstrap.js" asp-append-version="true"></script>
        <script href="~/lib/font-awesome/js/all.js" asp-append-version="true"></script>
    </body>


    <!--Footer Section-->
    <footer>
        <div class="container">
            <div class="row justify-content-center text-center text-light">
                <div class="col-md-9">
                    <img src="~/img/logo_white.png" alt="ChoreBear"/>
                    <p>ChoreBear strives to provide the greatest household services and provide the best freelancing oppurtunity in the world</p>
                </div>

                <!--Contact us section-->
                <div class="col-md-4">
                   <hr class="bg-light">
                   <h5>Contact us</h5>
                   <hr class="bg-light">
                   <p><a href="tel:+60331220262">+603-3122 0262</a></p>
                   <p><a href="mailto:+chorebear@@gmail.com">chorebear.gmail.com</a></p>
                   <p>62, Jalan Palas 12</p>
                   <p>Taman Dato Hormat</p>
                   <p>Telok Panglima Garang, 42500</p>
                   <p>Kuala Langat, Selangor, Malaysia</p>
                </div>

                <!--Operation hours section-->
                <div class="col-md-4">
                   <hr class="bg-light">
                   <h5>Our hours</h5>
                   <hr class="bg-light">
                   <p>Monday - Thursday: 9am - 4.30pm</p>
                   <p>Friday: 8.30am - 4pm</p>
                   <p>Saturday - Sunday: Closed</p>
                   <p>Public Holidays: Closed</p>
                </div>

                <!--Service areas section-->
                <div class="col-md-4">
                   <hr class="bg-light">
                   <h5>Locations</h5>
                   <hr class="bg-light">
                   <p>United Kingdom</p>
                   <p>United States</p>
                   <p>Malaysia</p>
                   <p>Israel</p>
                </div>
            </div>
        </div>
    </footer>

    <!--Socket for the website-->
    <div class="socket text-light text-center py-4">
        <p>&copy;<a href="https://www.chorebear.com">chorebear.com</a></p>
    </div>
</html>

索引.cshtml

@page
@model MyApp.Namespace.IndexModel
@{
    Layout = "~/Views/Shared/_Layout.cshtml";
}


<!--Image carousel slider-->
    <div id="carousel" class="carousel-slide" data-ride="carousel" data-interval="1000">
        <div class="carousel-inner">

            <!--Carousel image-->
            <div class="carousel-item active">
                <img src="~/img/carousel/background2.jpg" alt="Decorating" class="w-100">
            </div>

            <div class="carousel-item">
                <img src="~/img/carousel/background3.jpg" alt="Plumbing" class="w-100">
            </div>

            <div class="carousel-item">
                <img src="~/img/carousel/background4.jpg" alt="Electricity Repair" class="w-100">
            </div>

            <div class="carousel-item">
                <img src="~/img/carousel/background5.jpg" alt="Becoming a Tasker" class="w-100">
            </div>
        </div>
        
        <!--Image Carousel indicators-->
        <ol class="carousel-indicators">
            <li data-target="#carousel" data-slide-to="0" class="active"></li>
            <li data-target="#carousel" data-slide-to="1"></li>
            <li data-target="#carousel" data-slide-to="2"></li>
            <li data-target="#carousel" data-slide-to="3"></li>
        </ol>
    </div>

这是图像轮播所需文件的目录 在此处输入图像描述

在此处输入图像描述

标签： twitter-bootstrapasp.net-core-mvc

解决方案

I have found the solution to the problem. My _Layout.cshtml has wrong html attribute which is

<script src="~/lib/jquery/jquery.slim.min.js" asp-append-version="true"></script>
        <script src="~/lib/popper.js/umd/popper.min.js" asp-append-version="true"></script>
        <script src="~/lib/twitter-bootstrap/js/bootstrap.min.js" asp-append-version="true"></script>

Previously, it was "href" which is wrong and was not working.

推荐阅读