Microsoft Visual Studio 中的 Index.cshtml 文件。我希望能够将我的轮播移动到第二张图像，但它不会滑动。
@{ ViewBag.Title = "Home Page"; }
<div id="myCarousel" class="carousel slide">
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="~/Content/img/slide-1.png" alt="First Image" class=""/>
<div class="carousel-caption">
<h2 class="awesome">This Template Is Awesome</h2>
<p class="awesome-line">resto restaurant home page website template</p>
</div>
</div>
<div class="item">
<img src="~/Content/img/slide-2.png" alt="Second Image" class="" />
<div class="carousel-caption">
<h2 class="awesome">This Template Is Awesome</h2>
<p class="awesome-line">resto restaurant home page website template</p>
</div>
</div>
</div>
<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>
</div>
_Layout.cshtml页面
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>@ViewBag.Title</title>
@Styles.Render("~/Content/css")
@Scripts.Render("~/bundles/modernizr")
</head>
<body>
<div class="navbar navbar-inverse">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav pull-right">
<li>@Html.ActionLink("Our Story", "Index", "Home")</li>
<li>@Html.ActionLink("Menu", "Menu", "Home")</li>
<li>@Html.ActionLink("Reservations", "Reservations", "Home")</li>
<li>@Html.ActionLink("News", "News", "Home")</li>
<li>@Html.ActionLink("Reviews", "Reviews", "Home")</li>
</ul>
</div>
</div>
</div>
<div class="container body-content">
@RenderBody()
<hr />
<footer>
<p>© @DateTime.Now.Year - My ASP.NET Application</p>
</footer>
</div>
@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/bootstrap")
@RenderSection("scripts", required: false)
</body>
</html>
我需要调用index.cshtml文件中的脚本吗？
最佳答案
是的，请调用 Jquery、boostrap 脚本
将您的 href 更改为轮播 ID
<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>
此代码将帮助您自动滑动轮播
<script type="text/javascript">
$(document).ready(function() {
$('.carousel').carousel({
interval: 1200
})
});
</script>
一点点 JavaScript 就可以解决问题:)
关于c# - MVC 轮播不会自动滑动 Bootstrap MVC，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/27084014/