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

【问题标题】：jQuery: Flexslider caption not working + extra space on the very left of my page?jQuery：Flexslider 标题不起作用 + 我页面最左侧的额外空间？
【发布时间】：2013-06-04 04:52:39
【问题描述】：

我正在尝试为我的项目创建一个新的网页设计，但我遇到了这个滑块问题。

<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/ 但我拥有的那个看起来并不接近。不太确定我做错了什么。：/

第二件事：不知道为什么页面的最左边有多余的空间，但这可能会破坏我的设计，所以任何人都想发现这一点。

第三件事：有时，图像不合适，或者滑块丢失，或者图像根本无法加载。不知道为什么会一直这样。

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

希望有人能帮忙，谢谢！

【问题讨论】：

请发布您的代码，推荐通过JS Fiddle。

标签： jquery html css slider caption

【解决方案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

【讨论】：

我使用了不同的滑块插件，我认为这个新插件效果更好。谢谢大家:)

【解决方案2】：

我认为最好为滑块容器设置宽度您使用 -30px left 来导航标签，它将放置在页面外，因此您将在页面中看到滚动条，如果您不想要此滚动并想要整页滑块，则必须设置

.slidercontaier { overflow : hidden; }

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

【讨论】：