jquery - unslider 中的第一张幻灯片显示不正确

Question

我正在使用 Unslider 在我的网站上显示一些内容。效果很好，但不幸的是，第一张幻灯片在页面加载时关闭(高度为 310px，而应为 110px)。

它还在 Unslider 代码生效之前 呈现页面，这很可能是上述高度问题的原因。我停止了页面的渲染，并且 <li> 的高度在 unslider 代码在重新访问幻灯片时调整它的大小之前元素是 310px。

我想防止“预渲染”和第一张幻灯片的高度不正确。

DEMO

为了直观地说明示例，这是最初发生的情况:

[TITLE 1]
[SLIDE 1 CONTENT] [IMAGE 1]
[TITLE 2]
[SLIDE 2 CONTENT] [IMAGE 2]
...etc (note visual width/height)

然后，在半秒的加载时间后，它会正确显示幻灯片(这也会修正宽度):

[TITLE 1]                             [IMAGE 1]
[SLIDE         1      CONTENT]


height maintained

---

我的代码如下:

CSS:

.hp_slideshow {
    position: relative;
    overflow: auto;
    width:592px;
}
    .hp_slideshow ul { padding: 0; }
    .hp_slideshow li {
        list-style: none;
        position: relative;
        width: 100%;
        padding: 0;
    }
        .hp_slideshow ul li { float: left; }

JS:

$(function() {
    $('.hp_slideshow').unslider({
        dots: true,
        delay: 4000,
        keys: true
    });
});

HTML:

<div class="hp_slideshow">
    <ul>
      <li>
        <img style="float:right;"/>
        <h2>Title</h2>
        <p>Content</p>
      </li>
      (repeat for 5 slides)
    </ul>
</div>

Answer 1

我也面临这个问题。我已修复在 ul 中添加“高度”。

CSS
.hp_slideshow ul { height: px!important;}