MVC Carousel不能自動滑動Bootstrap MVC

Microsoft Visual Studio中的Index.cshtml文件。我想讓我的傳送帶移動到第二個圖像，但不會滑動。MVC Carousel不能自動滑動Bootstrap MVC

@{ 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文件中的腳本？

來源

2014-11-23 Jose

你需要使用'data-ride =「carousel」'使它成爲sli在頁面加載時自動執行;紅色Bootstrap的文檔。 – cvrebert 2014-11-23 01:57:32

是做呼叫Jquery的，自舉腳本

更改您的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將做的伎倆:)

來源

2014-11-23 01:26:04 Jon

是的，這項工作！謝謝:) – Jose 2014-11-23 03:13:26

歡迎您:) – Jon 2014-11-23 03:35:53

MVC Carousel不能自動滑動Bootstrap MVC

回答

相關問題