首次滑入unlider无法正常显示

Question

我正在使用Unslider在我的网站上显示一些内容。它工作得很好，但遗憾的是，第一张幻灯片在页面加载时关闭（高度为310px，应为110px）。

它还会在之前呈现页面，Unslider代码生效，这很可能是上述高度问题的原因。我停止了页面的渲染，<li>元素的高度为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;}

Answer 2

我遇到了同样的问题，并找到了不止一个解决方案：

1. 正如@Shalini Subramani所说，你可以在滑块div中添加ul的高度：

CSS

.slider ul {
    height: 450px
}

1. 您可以将高度属性添加到滑块中的第一个图像

HTML

<div class="slider">
    <ul>
        <li><img src="slider1.png" height="450" />
    </ul>
</div>

1. 您还可以在ul
上设置min-height

CSS

.slider ul {
    min-height: 450px
}

第二个有点，因为它使用height属性，但它允许您从代码中动态设置第一个横幅的高度。如果您事先不知道第一个滑块的高度，或者它根据用户上传的内容经常更改，则此功能非常有用。

Answer 3

是的，我顺便说一句，

unlider查找其li标签，它定义了一个用于去除其宽度和高度的向量。如下所示，

 <li>
                <img src="CMS/Files/slider_01.jpg" alt="" style="width: 105%; height: 980px;" />
                <div class="widthfix">
                    <div>
                        <a>
                            <h2>Huzurunuz icin koruyoruz..</h2>
                            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus libero quam, blandit sed hendrerit molestie, rhoncus in velit.</p>
                        </a>
                    </div>
                </div>
            </li>

如果您使用没有新div的标签，则不知道其位置链接到其图像容器或其他元素的位置。主要原因是我认为所有浏览器都支持响应式设计。