FlexSlider가 MVC5 프레임 워크와 함께 작동하지 않습니다.

Question

MVC5를 사용하여 웹 사이트를 만들고 있습니다. 여기에있는 모든 웹 사이트에서 FlexSlider (여기에서 찾을 수 있습니다 : https://woocommerce.com/flexslider/)를 내 페이지 중 하나에 통합하려고합니다.

작동하지 않는 것 같습니다. 페이지에는 아무 것도 표시되지 않지만 각 이미지가 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"])가 반환하는 내용을 확인 했습니까?

하지만 ... 부트 스트랩에서 실행되는 캐 러셀을 사용할 수 있습니다. 아래 코드는 이미지 폴더를 스캔 한 다음 뷰백으로 뷰로 보냅니다.

--Controller 코드 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 코드 끝 -

그냥 알다시피 .. 코드가 완전하지는 않지만 그 wor 이미지가있는 경우에는 ks가 필요합니다. "뷰백 등에 이미지가 없는지 확인하지 않습니다." 그러나 확실히 자신을 쉽게 만들 수 있습니다.