jquery - 将固定内容放入 flexslider 幻灯片

Question

我需要帮助将固定内容放入 flexslider。我的意思是，会有一些文本或一些按钮，幻灯片就像它的背景一样。我受到这里关于 stackoverflow 的一个主题的启发，我做了这样的事情。

<div class="flexslider">
                <div class="textinside">Some text</div>

                <ul class="slides">
                    <li>
                        <img src="/images/1.jpg" />
                    </li>
                    <li>
                        <img src="/images/2.jpg" />
                    </li>
                    <li>
                        <img src="/images/3.jpg" />
                    </li>
                </ul>
            </div>

以及 .textinside 的样式:

 .textinside{ width:15%; background-color:black; padding:10px; text-align:center; }
 .textinside{ position:absolute; top:100px; left:50%; margin-left:-500px; z-index:1;}

问题在于，当幻灯片发生变化时，此文本只显示一小会儿，然后就消失了。每个 flexslider 选项都设置为默认值。有没有人这么好心帮我解决这个问题？谢谢

Answer 1

增加z-index值:

.textinside {
    /* ... other styles */
    z-index: 10;
}

Flexslider li 元素有 z-index: 2。这解释了为什么您会在元素转换期间看到文本闪烁一小段时间。使 .textinside z-index 至少为 3。