javascript - 页面刷新时轨道 slider 未加载？

Question

我对 ZURB 基金会的 Orbit 幻灯片放映有疑问。

http://visiondemo.com.au/tmp/

如果您单击标题 Logo 或通过单击链接进入主页，幻灯片将完美加载。没有问题。但是，如果您点击刷新，它就会丢失。

此外，当页面刷新且幻灯片丢失时，调整窗口大小使其神奇地出现。

我有什么办法让它一直加载吗？

干杯。

Answer 1

嗯，这个答案将是一种相当笨拙的做事方式，但我认为它会以某种方式为您工作..

首先修复了data-orbit中的height: 0px问题。 由于您已将轨道的内容也选择为实际标题，因此请尝试将其添加到 <style> 中。标记或在您的 style.css 中。 (#note 这仅适用于中上 block ，请为小块提供您的高度)。

.slideshow.show-for-medium-up > li {
    height: 421px !important;
}

现在这已经很好并且可以工作了，您现在会看到您的轨道.. 显然会出现另一个问题。它会在内容的 .orbit-caption 完成列表样式之前显示轨道。所以将这个小修复附加到您的 style.css

/* Orbit Fix */

    ul[data-orbit] {
        margin: 0;
        padding-left: 0;
        list-style-type: none;
    }

    /* initially, hide all slides... */
    ul[data-orbit] li,
    ul[data-orbit] .orbit-caption {
        display: none;
    }

    /* ...except for the first one */
    ul[data-orbit] li:first-child { display: block; }

    /* show slides once .orbit-container is loaded */
    .orbit-container ul[data-orbit] li,
    .orbit-container ul[data-orbit] .orbit-caption {
        display: block;
    }

更新: 我认为那是因为你只在屏幕小的时候显示图像，我建议添加这个，

.slideshow.show-for-small-only img { 
     /* change the img height here */ 
     height: 200px; /* Change this as you see fit */
}