1

有人可以帮我弄清楚为什么我的 flexslider 没有出现在我的页面上吗？我不知道问题是什么。

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>

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

4

2 回答 2

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);
}

还请修复您ctrl-shift-j在 chrome 中使用的源图像以查看哪些丢失。

通过这个更改flexslider样式表： http ://flexslider.woothemes.com/css/flexslider.css

于 2013-11-05T21:02:45.927 回答
0

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

于 2013-11-05T20:27:04.057 回答