title: Adding JQuery Plugin to New MVC4 Web Application
body: <p>I'm new to MVC 4 and JQuery.  This is a simple question, but I'm providing extra information in case it helps.  My question is <strong>"How do I incorporate a simple jquery plugin into the MVC 4 framework?"</strong>  I've been completely unsuccessful incorporating jquery plugins into my project.  I have gotten the "alert" document.ready test to work, but I haven't gotten any plugin to work when incorporating it into the MVC framework.  I've searched all over for a solid tutorial on this but can't find anything.</p>
  
  <p>I would appreciate an answer to the general question above, or an answer to what I'm doing wrong with the following implementation.  I'm trying to add a picture carousel to the layout of a new MVC web application project.  I must have something out of place, because the slides jquery plugin works perfectly apart from MVC 4 (see html at bottom), but the images just show up next to each other on the page after adding everything to the new MVC 4 project.  Before placing into my MVC project, I paired down the slides so that no css is needed, and verified it works outside of MVC 4.  Please help!--been stuck on this long time.  Here is my code:</p>
  
  <p><strong>_Layout.cshtml</strong></p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
      &lt;meta charset="utf-8" /&gt;
      &lt;title&gt;@ViewBag.Title - My ASP.NET MVC Application&lt;/title&gt;
      &lt;link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" /&gt;
      &lt;meta name="viewport" content="width=device-width" /&gt;
      @Styles.Render("~/Content/css")
      @Scripts.Render("~/bundles/modernizr")
      @Scripts.Render("~/bundles/jquery")
      @Scripts.Render("~/bundles/jqueryui")
  &lt;/head&gt;
  &lt;body&gt;
      &lt;header&gt;
          &lt;div class="content-wrapper"&gt;
              &lt;div class="float-left"&gt;
                  &lt;p class="site-title"&gt;@Html.ActionLink("your logo here", "Index", "Home")&lt;/p&gt;
              &lt;/div&gt;
              &lt;div class="float-right"&gt;
                  &lt;section id="login"&gt;
                      @Html.Partial("_LoginPartial")
                  &lt;/section&gt;
                  &lt;nav&gt;
                      &lt;ul id="menu"&gt;
                          &lt;li&gt;@Html.ActionLink("Home", "Index", "Home")&lt;/li&gt;
                          &lt;li&gt;@Html.ActionLink("About", "About", "Home")&lt;/li&gt;
                          &lt;li&gt;@Html.ActionLink("Contact", "Contact", "Home")&lt;/li&gt;
                      &lt;/ul&gt;
                  &lt;/nav&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/header&gt;
      &lt;div id="body"&gt;
          @RenderSection("featured", required: false)
          &lt;section class="content-wrapper main-content clear-fix"&gt;
              @RenderBody()
          &lt;/section&gt;
      &lt;/div&gt;
      &lt;footer&gt;
          &lt;div class="content-wrapper"&gt;
              &lt;div class="float-left"&gt;
                  &lt;p&gt;&amp;copy; @DateTime.Now.Year - My ASP.NET MVC Application&lt;/p&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/footer&gt;
  
      &lt;div id="slides"&gt;
          &lt;img src="~/Images/Home_AEB3075%20(1).jpg" width="464" height="309" /&gt;
          &lt;img src="~/Images/Home_AEB3075%20(2).jpg" width="464" height="309" /&gt;
          &lt;img src="~/Images/Home_AEB3075%20(3).jpg" width="464" height="309" /&gt;
      &lt;/div&gt;
  
  
      &lt;script&gt;
          $(function () {
              $('#slides').slidesjs({
                  width: 464,
                  height: 309,
                  play: {
                      active: true,
                      auto: true,
                      interval: 4000,
                      swap: true
                  }
              });
          });
      &lt;/script&gt;
  
      @RenderSection("scripts", required: false)
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p><strong>BundleConfig.cs</strong></p>
  
  <pre><code>bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
                      "~/Scripts/jquery-{version}.js"));
  
          bundles.Add(new ScriptBundle("~/bundles/jqueryui").Include(
                      "~/Scripts/jquery-ui-{version}.js",
                      "~/Scripts/jquery.ui.slides.js"));
  </code></pre>