FlexSlider не работает с MVC5 Framework

Question

Я создаю сайт с использованием MVC5 (мы делаем это для всех наших сайтов здесь), и я пытаюсь интегрировать FlexSlider (найти здесь: https://woocommerce.com/flexslider/) на одну из моих страниц.

Я не могу заставить его работать, страница просто ничего не отображает, но она появляется в «Элементе проверки» с каждым изображением как 0x0 px.

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 (элемент ["newsimage"]) возвращается?

Но ... Вы можете использовать карусель, который работает на бутстрапе. Код, приведенный ниже, предназначен для сканирования папки для изображений, а затем я отправляю их на просмотр с помощью viewbag.

--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 код End -

Просто, чтобы вы знали .. код не является полным, но его ks наверняка, если есть изображения «Он не проверяет, нет ли изображений в сумке для просмотра и т. д.» Но наверняка это будет легко сделать самим.