Javascript FlexSlider根本不显示，标题显示不正确？

有人能帮我找出为什么我的flexslider没有出现在我的页面上吗？我不知道问题是什么

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

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

$（窗口）。加载（函数（）{
$（'.flexslider'）.flexslider({
动画：“幻灯片”、//幻灯片或淡入淡出
controlsContainer:“.flex容器”//容纳flexslider的容器
});
});


标题和布朗尼。成功的组合


标题和布朗尼。成功的组合

更新：

---

我现在可以看到滑块了，但由于某些原因，它非常混乱。有什么想法吗？也，有人知道如何确保我的下拉菜单位于滑块上方而不是下方吗？

删除

http://www.your_domain.com/
脚本中的
src
属性。
删除
http://www.your_domain.com/
在
脚本中
src
属性中。
首先删除
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://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的样式表：
wowww，哈哈。非常感谢。我真是个白痴，这是我的第一个网站，所以我为我的愚蠢道歉。现在它出现了，但它仍然令人难以置信的混乱。。。你自己修改css了吗？@NickN。我在幻灯片的代码中有这样一个标题：
我们销售和住宅门。查看我们的住宅车库门和电动开门器分销商列表
 样式：柔性标题{宽度：96%；填充：2%；位置：绝对；左侧：0；底部：0；背景：rgba（0,0,0,0.6）；颜色：#fff；文本对齐：中心；文本阴影：0-1px 0 rgba（0,0,0,0.3）；字体大小：99%；线条高度：10px；边距：0；高度：自动；}woww，哈哈。非常感谢。我真是个白痴，这是我的第一个网站，所以我为我的愚蠢道歉。现在它出现了，但它仍然令人难以置信的混乱。。。你自己修改css了吗？@NickN。我在幻灯片的代码中有这样一个标题：
我们销售和住宅门。查看我们的住宅车库门和电动开门器分销商列表
 样式：。柔性标题{宽度：96%；填充：2%；位置：绝对；左侧：0；底部：0；背景：rgba（0,0,0,0.6）；颜色：#fff；文本对齐：中心；文本阴影：0-1px 0 rgba（0,0,0,0.3）；字体大小：99%；线条高度：10px；边距：0；高度：自动；}我想您应该给出
.flexslider.slides li
位置：relative
，以便您的绝对定位
元素正确定位。对于下拉菜单，您可能可以使用css中的z索引规则来修复它。另外，slide2.png也不存在。我想您应该给出
.flexslider.slides li
位置：relative
，以便您的绝对定位
元素正确定位。对于下拉菜单，您可能可以使用css中的z索引规则来修复它。另外，slide2.png不存在。好的，上面的链接应该更新。我改变了一些东西，现在看起来好多了，但是滑块导航不正常。。。图像上的方向混乱不堪。我也不能解决一些源图像问题。请用这个替换你的整个样式表，除了我给你的样式：这将解决你的问题。你是我的英雄。现在看起来很不错，虽然很难看到带有图片的方向箭头。你知道为什么在chrome上标题上的文字看起来粗体而在safari上看起来正常吗？忘记不透明度的事情，如果你想让图片更清晰，你应该更改图片，也许可以试试GIMPOkay，上面的链接应该更新。我改变了一些东西，现在看起来好多了，但是滑块导航不正常。。。图像上的方向混乱不堪。我也不能解决一些源图像问题。请用这个替换你的整个样式表，除了我给你的样式：这将解决你的问题。你是我的英雄。现在看起来很不错，虽然很难看到带有图片的方向箭头。你知道为什么在chrome上标题上的文字看起来粗体而在safari上看起来正常吗？忘记不透明度的事情吧，如果你想让图片更清晰，你应该改变图片，也许可以试试GIMP