Question

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 Page

<!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文件中调用脚本？

Answer 1

是的，请调用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就可以解决问题：）

MVC Carousel不能自动滑动Bootstrap MVC

1 个答案: