jQuery：Flexslider标题不工作+我的页面左侧有额外的空间？

我试图为我的项目创建一个新的网页设计，但我卡在这个滑块问题。jQuery：Flexslider标题不工作+我的页面左侧有额外的空间？

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

1件事：有字幕的滑块应该是这样的：http://www.woothemes.com/flexslider/ 但一个我看起来不接近。不太确定我做错了什么。：/

第二件事：不确定为什么页面左侧有额外的空间，但它可能会破坏我的设计，所以任何人都想要发现。

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

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

希望有人能帮忙，谢谢！

来源

2013-06-04 PC Zero

请发表你的代码，建议通过[JS小提琴（http://www.jsfiddle.net/）。 – Ishpreet

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

.slidercontaier { overflow : hidden; }

，也似乎你没有复制所需

来源

2013-06-04 05:30:37

所有的CSS有在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

来源

2013-06-04 11:16:52

我使用了不同的滑块插件，我认为这个新的更好。感谢反正人:) –

jQuery：Flexslider标题不工作+我的页面左侧有额外的空间？

回答

相关问题