jQuery:Flexslider 标题不起作用 + 我页面最左侧的额外空间？

Question

我正在尝试为我的元素创建一个新的网页设计，但我卡在了这个 slider 问题上。

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

第一件事:带标题的 slider 应该如下所示:http://www.woothemes.com/flexslider/但是我拥有的那个看起来并不接近那个。不太确定我做错了什么。 :/

第二件事:不确定为什么页面的最左边有多余的空间，但这可能会破坏我的设计，所以任何人都想找出来。

第三件事:有时，图像错位，或者 slider 丢失，或者图像根本无法加载。不确定为什么会一直这样。

不要问标题，我把它搞砸了，但我会在完成这个 slider 并完成后修复它。

希望有人能帮忙，谢谢!

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 类以适应您的图像，然后提供高度和宽度属性。

Click here for Updated Fiddle