如何解决Bootstrap Image Carousel无法在使用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>©<a href="https://www.chorebear.com">chorebear.com</a></p>
</div>
</html>Index.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>这是图像轮播所需的文件目录
解决方法
我找到了解决问题的方法。我的_Layout.cshtml具有错误的html属性，
<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>
以前，这是“ href”，它是错误的，无法正常工作。
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。