title: MVC Carousel not sliding automatically Bootstrap MVC
body: <p>The Index.cshtml file in Microsoft Visual Studio. I want to be available to have my carousel move to the second image but it doesn't slide. </p>
  
  <pre><code>@{ ViewBag.Title = "Home Page"; }
  &lt;div id="myCarousel" class="carousel slide"&gt;
    &lt;div class="carousel-inner" role="listbox"&gt;
      &lt;div class="item active"&gt;
        &lt;img src="~/Content/img/slide-1.png" alt="First Image" class=""/&gt;
        &lt;div class="carousel-caption"&gt;
          &lt;h2 class="awesome"&gt;This Template Is Awesome&lt;/h2&gt;
          &lt;p class="awesome-line"&gt;resto restaurant home page website template&lt;/p&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="item"&gt;
        &lt;img src="~/Content/img/slide-2.png" alt="Second Image" class="" /&gt;
        &lt;div class="carousel-caption"&gt;
          &lt;h2 class="awesome"&gt;This Template Is Awesome&lt;/h2&gt;
          &lt;p class="awesome-line"&gt;resto restaurant home page website template&lt;/p&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;a class="left carousel-control" href="#mySlider" data-slide="prev"&gt;&lt;span class="glyphicon glyphicon-chevron-left"&gt;&lt;/span&gt;&lt;/a&gt;
    &lt;a class="right carousel-control" href="#mySlider" data-slide="next"&gt;&lt;span class="glyphicon glyphicon-chevron-right"&gt;&lt;/span&gt;&lt;/a&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>_Layout.cshtml Page</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
    &lt;head&gt;
      &lt;meta charset="utf-8" /&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
      &lt;title&gt;@ViewBag.Title&lt;/title&gt;
      @Styles.Render("~/Content/css")
      @Scripts.Render("~/bundles/modernizr")
    &lt;/head&gt;
    &lt;body&gt;
      &lt;div class="navbar navbar-inverse"&gt;
        &lt;div class="container"&gt;
          &lt;div class="navbar-header"&gt;
            &lt;button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"&gt;
              &lt;span class="icon-bar"&gt;&lt;/span&gt;
              &lt;span class="icon-bar"&gt;&lt;/span&gt;
              &lt;span class="icon-bar"&gt;&lt;/span&gt;
            &lt;/button&gt;   
          &lt;/div&gt;
          &lt;div class="navbar-collapse collapse"&gt;
            &lt;ul class="nav navbar-nav pull-right"&gt;
              &lt;li&gt;@Html.ActionLink("Our Story", "Index", "Home")&lt;/li&gt;
              &lt;li&gt;@Html.ActionLink("Menu", "Menu", "Home")&lt;/li&gt;
              &lt;li&gt;@Html.ActionLink("Reservations", "Reservations", "Home")&lt;/li&gt;
              &lt;li&gt;@Html.ActionLink("News", "News", "Home")&lt;/li&gt;
              &lt;li&gt;@Html.ActionLink("Reviews", "Reviews", "Home")&lt;/li&gt;
            &lt;/ul&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="container body-content"&gt;
        @RenderBody()
        &lt;hr /&gt;
        &lt;footer&gt;
          &lt;p&gt;&amp;copy; @DateTime.Now.Year - My ASP.NET Application&lt;/p&gt;
        &lt;/footer&gt;
      &lt;/div&gt;
  
      @Scripts.Render("~/bundles/jquery")
      @Scripts.Render("~/bundles/bootstrap")
      @RenderSection("scripts", required: false)
  
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Do I need to call the script in the index.cshtml file?</p>