Question

我正在使用MVC5创建一个网站（我们在这里为我们所有的网站做），我正在尝试将FlexSlider（在此处找到https://woocommerce.com/flexslider/）集成到我的一个页面中。

我似乎无法使其工作，页面只显示任何内容，但它出现在'Inspect Element'中，每个图像都是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（item [“newsimage”]）返回的内容吗？

但是... 你可以使用在bootstrap上运行的轮播。我做的下面的代码是扫描文件夹中的图像，然后我用视窗将它们发送到视图。

- 控制器代码开始 -

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

ViewBag.Sliderimages = GetSliderImaged;

- 控制器代码结束 -

- 查看代码开始 -

<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>

- 查看代码结束 -

只是你知道..代码不完整，但它确实有效，如果有图像“它不会检查viewbag中是否有图像等” 但可以肯定的是，自己很容易做到。

FlexSlider无法使用MVC5 Framework

1 个答案: