将固定内容放到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。