Flexslider标题不工作+额外的空间在我的页面的左边

Question

我想为我的项目创建一个新的网页设计，但是我被这个滑块问题卡住了。

<div class="flex-container">
<div class="flexslider">
<ul class="slides">
<li>
  <img src="slides/newest.png" />
   <p class="flex-caption">Captions and cupcakes. Winning combination.</p>
</li>
<li>
  <img src="slide2.jpg" />
   <p class="flex-caption">Captions and cupcakes. Winning combination.</p>
</li>
<li>
  <img src="slide3.jpg" />
</li>
</ul>
</div>
</div>

http://jsfiddle.net/DhsuS/5/

第一件事:带标题的滑块应该看起来像这样:http://www.woothemes.com/flexslider/但我手上的这个看起来不太像。不太确定我做错了什么。:/

第二件事:不知道为什么在页面的最左边有额外的空间，但它可能会破坏我的设计，所以有人想指出这一点吗?

第三件事:有时，图像不在位置，或者滑块丢失，或者图像根本没有加载。不知道为什么总是这样。

不要问标题，我搞砸了，但我会修复它后，我得到这个滑块完成和结束。

希望有人能帮忙，谢谢!

Answer 1

css中有一个类:

.flex-caption {
    background: none repeat scroll 0 0 rgba(0, 0, 0, 0.6);
    bottom: 0;
    color: #FFFFFF;
    font-size: 14px;
    left: 0;
    line-height: 18px;
    padding: 2%;
    position: absolute;
    text-align: center;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.3);
    width: 96%;
}

从该类中删除或注释背景属性，这将使您的图像在li中可见。还有一件事，要么使用一个精确大小的图像，要么更新你的CSS类来适应你的图像，提供高度和宽度属性。

点击这里更新

Answer 2

我认为最好为滑块容器设置宽度你用-30px left作为导航标签，它会放置在页面之外，所以你会看到页面上的滚动条，如果你不想要这个滚动条，想要整个页面的滑动条，你必须设置

.slidercontaier { overflow : hidden; }

，而且似乎你没有复制所有需要的CSS