我对 ASP.NET MVC 和 Bootstrap 还很陌生。我正在尝试让轮播在我的主页上运行。轮播显示在页面上，并且我选择作为事件图像的图像也显示，但是当我单击指示器或上一个和下一个箭头时，没有任何反应。我已经检查了 css 和 js 文件是否位于正确的文件夹中，并且它们正在页面上呈现，因此任何帮助都会很棒。
这是我的主要_layout.cshtml
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>@ViewBag.Title - My ASP.NET MVC Application</title>
<link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<style>
body { padding-top: 60px; /* 60px to make the container go all the way to the bottom of the topbar */ }
.aligntobottom { bottom:0; position:absolute; }
</style>
@Scripts.Render("~/bundles/modernizr")
@Styles.Render("~/Content/Bootstrap")
</head>
<body>
<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="@Url.Action("Index", "Home")">Your Logo Here</a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li>@Html.ActionLink("Home", "Index", "Home")</li>
<li>@Html.ActionLink("About", "About", "Home")</li>
<li>@Html.ActionLink("Contact", "Contact", "Home")</li>
</ul>
@Html.Partial("_LoginPartial")
</div><!--/.nav-collapse -->
</div>
</div>
<div class="container">
@if(IsSectionDefined("featured")){
<div class="jumbotron">
@RenderSection("featured", required: false)
</div>
}
@RenderBody()
</div>
@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/Scripts/Bootstrap")
@RenderSection("scripts", required: false)
</body>
</html>
我的主索引页面如下所示
@{
ViewBag.Title = "Home Page";
}
<div id="mySlider" class="carousel slide">
<ol class="carousel-indicators">
<li data-target="#mySlider" data-slide-to="0" class="active"></li>
<li data-target="#mySlider" data-slide-to="1"></li>
<li data-target="#mySlider" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="item active">
<img alt="First slide" src="~/Images/myImg1.jpg" />
</div>
<div class="item">
<img alt="Second slide" src="~/Images/myImg2.jpg" />
</div>
<div class="item">
<img alt="second slide" src="~/Images/myImg3.jpg" />
</div>
</div>
<a class="left carousel-control" href="#myCarousel" data-slide="prev"><span class="glyphicon glyphicon-chevron-left"></span></a>
<a class="right carousel-control" href="#myCarousel" data-slide="next"><span class="glyphicon glyphicon-chevron-right"></span></a>
</div>
我的捆绑配置看起来像这样
using System.Web;
using System.Web.Optimization;
namespace mmInteriors
{
public class BundleConfig
{
// For more information on Bundling, visit http://go.microsoft.com/fwlink/?LinkId=254725
public static void RegisterBundles(BundleCollection bundles)
{
bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
"~/Scripts/jquery-{version}.js"));
bundles.Add(new ScriptBundle("~/bundles/jqueryui").Include(
"~/Scripts/jquery-ui-{version}.js"));
bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(
"~/Scripts/jquery.unobtrusive*",
"~/Scripts/jquery.validate*"));
bundles.Add(new ScriptBundle("~/Script/Bootstrap").Include(
"~/Scripts/Bootstrap.js"));
bundles.Add(new StyleBundle("~/Content/Bootstrap").Include(
"~/Content/bootstrap.css"));
}
}
}
我可能错过了一些简单的东西，但就像很多事情一样，有时简单的事情是最难发现的，所以提前致谢。
最佳答案
您的左右轮播控件的 HREF 是#myCarousel，但您的轮播的 ID 是 myslider
以此进行更改:
<a class="left carousel-control" href="#mySlider" data-slide="prev"><span class="glyphicon glyphicon-chevron-left"></span></a>
<a class="right carousel-control" href="#mySlider" data-slide="next"><span class="glyphicon glyphicon-chevron-right"></span></a>
关于jquery - Bootstrap Carousel 无法与 asp.net MVC 一起使用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/24159898/