0

我试图为我的项目创建一个新的网页设计，但我坚持这个滑块问题。

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

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

第三件事：有时，图像不合适，或者滑块丢失，或者图像根本没有加载。不知道为什么这种情况不断发生。

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

希望有人能帮忙，谢谢！

4

2 回答 2

0

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

单击此处获取更新的小提琴

于 2013-06-04T11:16:52.453 回答
0

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

.slidercontaier { overflow : hidden; }

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

于 2013-06-04T05:30:37.780 回答