Question

有人可以帮我弄清楚我的柔性滑板没有出现在我的页面上的原因吗？我不知道问题是什么。

http://stweb.ccv.edu/CIS-1151-VO02-V13FA/kak10200/final_project/index.html

现在只是一条白线。这是我根据教程实现的代码：

<!-- Flexslider CSS and JS -->
<link rel="stylesheet" href="flex/css/flexslider.css" type="text/css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="http://www.your_domain.com/flex/js/jquery.flexslider.js"></script>

<!-- Load the flexslider -->
<script type="text/javascript" charset="utf-8">
  $(window).load(function() {
    $('.flexslider').flexslider({
      animation: "slide",  // slide or fade
      controlsContainer: ".flex-container" // the container that holds the flexslider
    });
  });
</script>

            <div class="flexslider">
              <ul class="slides">
                <li>
                  <img src="flex/images/slide1.png" /><p class="flex-caption">Captions and brownies. A winning combination.</p>
                </li>
                <li>
                  <img src="flex/images/slide2.png" /><p class="flex-caption">Captions and brownies. A winning combination.</p>
                </li>
              </ul>
            </div>

更新：所以我现在可以看到滑块，但由于某种原因，它很混乱。有任何想法吗？此外，有没有人知道如何确保我的下拉菜单在滑块上而不是在它下面？

Answer 1

首先删除脚本标记中的http://www.your_domain.com。

像这样编辑flexslider css：

.flexslider .slides img {
    /*width: 100%;*/
    display: block;
}

注意：如果这是自定义样式，您也可以删除整个块。

将这些内容添加到拥有 style.css：

.flexslider .slides li {
    position: relative;
}

.flexslider .flex-caption {
    position: absolute;
    bottom: 0;
    left: 0;
    margin: 0;
    padding: 10px;
    color: white;
    background-color: rgba(0, 0, 0, 0.6);
}

另请修复源图片，使用chrome中的ctrl-shift-j查看哪些内容丢失。

通过以下方式更改 flexslider 样式表：http://flexslider.woothemes.com/css/flexslider.css

Answer 2

删除http://www.your_domain.com/ script属性中的src。

FlexSlider根本没有显示，字幕显示不正确？

2 个答案: