FlexSlider not working with MVC5 Framework

Question

I am creating a website using MVC5 (we do for all our websites here) and I am trying to integrate the FlexSlider (found here: https://woocommerce.com/flexslider/) into one of my pages.

I can't seem to get it working, the page just displays nothing, yet it appears in the 'Inspect Element' with each image as being 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>

I also have the JS and CSS linked:

<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

Of course its a little bit difficult to say why your code is not working. Have you checked what @Html.Raw(item["newsimage"]) returns ?

But... You could use a carousel that runs on bootstrap. The code below i made is to scan a folder for images and then i send them to the view with a viewbag.

--Controller code Start--

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

ViewBag.Sliderimages = GetSliderImaged;

--Controller code End--

--View code 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 code End--

Just so you know .. the code is not complete but its works for sure if there are images "It does not check if there are no images in the viewbag etc" But for sure that will be easy to make it yourself.