gpt4 book ai didi

c# - MVC Carousel 不会自动滑动 Bootstrap MVC

转载 作者:行者123 更新时间:2023-11-30 22:02:13 29 4
gpt4 key购买 nike

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>&copy; @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 Carousel 不会自动滑动 Bootstrap MVC,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27084014/

29 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com