title: How do I build a carousel image slider using MVC cshtml?
body: <p>I am trying to code a carousel image slider in MVC using cshtml, the pictures are only displaying in one vertical row and isn't populating into the Carousel slider itself?<br>
  Here is what I have attempted so far: </p>
  
  <pre><code>Html.Raw("&lt;link href='../../Content/Site.css' rel='stylesheet'&gt;")
  @Html.Raw("&lt;script src='../../Scripts/jquery-1.5.1.min.js'&gt;&lt;/script&gt;")
  </code></pre>
  
  <h2>Products</h2>
  
  <pre><code>&lt;script src="Scripts/jquery.cycle.all.js"&gt;&lt;/script&gt;
  &lt;script src="Scripts/jquery.cycle.all.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript"&gt; $('#slider').cycle({ fx: 'fade', speed: 'fast', timeout: 0, next: '#next2', prev: '#prev2' });
  &lt;/script&gt;
  
  &lt;link rel="stylesheet" href="Content/css/feature-carousel.css" charset="utf-8" /&gt;
  
      &lt;meta http-equiv="Content-type" content="text/html; charset=UTF-8" /&gt;
      &lt;link rel="stylesheet" href="Content/css/feature-carousel.css" charset="utf-8" /&gt;
      &lt;script src="~/Scripts/jquery-1.10.2.js" type="text/javascript" charset="utf-8"&gt;&lt;/script&gt;
      &lt;script src="Content/js/jquery-1.7.min.js"&gt;&lt;/script&gt;
      &lt;script src="Content/js/jquery.featureCarousel.min.js" type="text/javascript" charset="utf-8"&gt;&lt;/script&gt;
      &lt;script type="text/javascript"&gt;
  
          $(document).ready(function ()
          {
              var carousel = $("#carousel").featureCarousel({
  
  
                  // include options like this:
                  // (use quotes only for string values, and no trailing comma after last option)
                  // option: value,
                  // option: value
              });
  
              $("#but_prev").click(function () {
                  carousel.prev();
              });
              $("#but_pause").click(function () {
                  carousel.pause();
              });
              $("#but_start").click(function () {
                  carousel.start();
              });
              $("#but_next").click(function () {
                  carousel.next();
              });
          });
      &lt;/script&gt;
  
  
            &lt;center&gt;
  
  
  
                      &lt;div class="carousel-container"&gt;&lt;/div&gt;
  
                          &lt;div id="carousel"&gt;
                              &lt;div class="carousel-feature"&gt;
                                  &lt;a href="#"&gt;&lt;img class="carousel-image" alt="Image Caption" src="~/Images/1.jpg" /&gt;&lt;/a&gt;
                                  &lt;div class="carousel-caption"&gt;
  
                                  &lt;/div&gt;
                              &lt;/div&gt;
  
                              &lt;div class="carousel-feature"&gt;
                                  &lt;a href="#"&gt;&lt;img class="carousel-image" alt="Image Caption" src="~/Images/2.jpg"&gt;&lt;/a&gt;
                                  &lt;div class="carousel-caption"&gt;
  
                                  &lt;/div&gt;
                              &lt;/div&gt;
  
                              &lt;div class="carousel-feature"&gt;
                                  &lt;a href="#"&gt;&lt;img class="carousel-image" alt="Image Caption" src="~/Images/3.jpg"&gt;&lt;/a&gt;
                              &lt;/div&gt;
  
                              &lt;div class="carousel-feature"&gt;
                                  &lt;a href="#"&gt;&lt;img class="carousel-image" alt="Image Caption" src="~/Images/4.jpg"&gt;&lt;/a&gt;
                                  &lt;div class="carousel-caption"&gt;
                                  &lt;/div&gt;
                              &lt;/div&gt;
  
                              &lt;div class="carousel-feature"&gt;
                                  &lt;a href="#"&gt;&lt;img class="carousel-image" alt="Image Caption" src="~/Images/5.jpg"&gt;&lt;/a&gt;
                                  &lt;div class="carousel-caption"&gt;
                                  &lt;/div&gt;
                              &lt;/div&gt;
  
                              &lt;div id="carousel-left"&gt;&lt;img src="~/Content/images/arrow-left.png" /&gt;&lt;/div&gt;
                              &lt;div id="carousel-right"&gt;&lt;img src="~/Content/images/arrow-right.png" /&gt;&lt;/div&gt;
                          &lt;/div&gt;
  
             &lt;/center&gt;
  </code></pre>