2014-11-23 4 views
2

Microsoft Visual Studio의 Index.cshtml 파일. 내 컨베이어를 두 번째 이미지로 이동시킬 수는 있지만 슬라이드하지는 않습니다. _Layout.cshtml 페이지MVC 회전 목마가 자동으로 이동하지 않음 부트 스트랩 MVC

<!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> 

@{ 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> 

내가 index.cshtml 파일에서 스크립트를 호출해야하나요?

+0

당신은 그것을 만들기 위해'data-ride = "carousel"을 사용해야한다. 페이지로드시 자동으로; 레드 부트 스트랩의 워드 프로세서. – cvrebert

답변

3

예는 부트 스트랩 스크립트

을 당신의 회전 목마 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> 

로 HREF 년대를 변경하고이 코드가 자동으로 회전 목마를 밀어 도움이 될 것입니다, JQuery와 전화를 할

<script type="text/javascript"> 
     $(document).ready(function() { 
     $('.carousel').carousel({ 
      interval: 1200 
     }) 
     }); 
    </script> 

약간의 자바 스크립트 속임수를 쓸 것이다 :

+0

예,이 작품! 고마워요 :) – Jose

+0

환영합니다 :) – Jon

관련 문제