FlexSliderがMVC5フレームワークで動作しない

Question

MVC5を使用してWebサイトを作成しています（ここではすべてのWebサイトで行っています）。FlexSlider（）を自分のページの1つに統合しようとしています。

私はそれを動作させるように見えることはできませんが、ページは何も表示しませんが、各画像が0x0 pxである 'Inspect Element'に表示されます。

HTML：

<div class="flexslider" data-controlnav="thumbnails"> 
    <ul class="slides"> 
     @if (Model.CDSContent != null) 
     { 
      foreach (var item in Model.CDSContent) 
      { 
       <li> 
        <a href="#"> 
         <img src="@Html.Raw(item["newsimage"])" alt="Slide 2"> 
         <div class="flex-caption">newstitle</div> 
        </a> 
       </li> 
      } 
     } 
     </ul> 
</div> 

私もJSとCSSがリンクされています：もちろん

<link rel="stylesheet" type="text/css" href="http://flexslider.woothemes.com/css/flexslider.css"> 
<link rel="stylesheet" type="text/css" href="http://lab.mattvarone.com/projects/jquery/totop/css/ui.totop.css"> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script> 
<script type='text/javascript' src="http://flexslider.woothemes.com/js/jquery.flexslider.js"></script> 
<script type='text/javascript' src="http://flexslider.woothemes.com/js/jquery.easing.js"></script> 
<script type='text/javascript' src="http://flexslider.woothemes.com/js/jquery.mousewheel.js"></script> 
<script type='text/javascript' src="http://lab.mattvarone.com/projects/jquery/totop/js/jquery.ui.totop.js"></script> 

Answer 1

あなたのコードが動作しない理由を言って、その少し難しいです。 @ Html.Raw（item ["newsimage"]）が返すものを確認しましたか？

しかし... ブートストラップで実行されるカルーセルを使用できます。 私が作ったコードは、画像のフォルダをスキャンしてから、ビューバックでビューに送信することです。コードStart--

var GetSliderImaged = Directory.EnumerateFiles(Server.MapPath("~/Content/SlideShowIndexPage")).Select(fn => Path.GetFileName(fn)); 

ViewBag.Sliderimages = GetSliderImaged; 

--ControllerコードEnd--

--viewコードStart--

<div id="myCarousel" class="carousel slide MTop10 BRadius10 unselectable" data-ride="carousel" data-interval="6000"> 
    <ol class="carousel-indicators" style="margin-bottom: 0px;"> 
     @{ 
      var ii = 0; 
      foreach (var image in ViewBag.Sliderimages) 
      { 
       if (ii == 0) 
       { 
        <li data-target="#myCarousel" data-slide-to="@ii" class="active"></li> 
       } 
       else 
       { 
        <li data-target="#myCarousel" data-slide-to="@ii"></li> 
       } 
       ii++; 
      } 
     } 
    </ol> 
    <div class="carousel-inner " role="listbox"> 
     @{ 
      var i = 0; 
      foreach (var image in ViewBag.Sliderimages) 
      { 
       if (i == 0) 
       { 
        <div class="item active"> 
         <img src="~/Content/SlideShowIndexPage/@image" alt="@image" title="@image" class="img-responsive AWIndexPageSlideImage" /> 
         <div class="carousel-caption"> 

         </div> 
        </div> 
        i++; 
       } 
       else 
       { 
        <div class="item"> 
         <img src="~/Content/SlideShowIndexPage/@image" alt="@image" title="@image" class="img-responsive AWIndexPageSlideImage" /> 
         <div class="carousel-caption"> 

         </div> 
        </div> 
       } 

      } 
     } 
    </div>  
    <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev"> 
     <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> 
     <span class="sr-only">Previous</span> 
    </a> 
    <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next"> 
     <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> 
     <span class="sr-only">Next</span> 
    </a> 
</div> 

--viewコードエンド

--Controller -

ちょうどあなたが知っている..コードは完全ではありませんが、そのworイメージがあるかどうか確かめてください。 "ビューバックにイメージがないかどうかチェックしません。" しかし、確かに自分で作るのは簡単でしょう。