Javascript 文本幻灯片在前2秒内彼此堆叠在一起

我的文本幻灯片相互叠加几秒钟，最后才能正常工作。 下面是它的样子： 我能做些什么来解决这个问题？以下是文本的代码：

            <div id="textslider"> 

            <div style="position: absolute; left: 50%;">
                <p style="position: relative; left: -50%; border: none;"> 
                    <?php echo get_field('testimony1'); ?> 
                </p>
            </div>

            <div style="position: absolute; left: 50%;">
                <p style="position: relative; left: -50%; border: none;"> 
                    <?php echo get_field('testimony2'); ?> 
                </p>
            </div>

            <div style="position: absolute; left: 50%;">
                <p style="position: relative; left: -50%; border: none;"> 
                    <?php echo get_field('testimony3'); ?> 
                </p>

            </div>

            </div> 

下面是jQuery中滑块的代码：

    <script src="http://code.jquery.com/jquery-latest.min.js"></script>

    <script>

$('#textslider > div:gt(0)').hide();

setInterval(function() { 
$('#textslider > div:first').fadeOut(500)
.next()
.fadeIn(1000)
.end()
.appendTo('#textslider');
},  3000);

      </script>

$（'#textslider>div:gt（0）'）.hide（）；
setInterval（函数（）{
$（'#textslider>div:first'）。淡出（500）
.next（）
法丹先生（1000）
(完)
.appendTo（“#文本滑块”）；
},  3000);

$（'#文本滑块>div:gt（0）'）。隐藏（）仅在加载jQuery后执行。通过将所有
#textsloider
子项（第一个子项除外）的“显示属性”设置为“无”，可以简单地将其移动到css，如下所示：

#textslider div:not(:first-child) {
  display: none;
}

请参阅。
谢谢你@KrisD。我在你的例子中使用了“T”的代码，CSS代码工作得很好（没有更多的堆叠文本，只有第一个文本显示）。但是，幻灯片不再有效。我将代码放在header.php中。幻灯片元素位于content.php中。你认为这就是问题所在吗？以前，jQuery代码只起作用（正确，但有堆叠的文本），当放入header.php（而不是content.php）时，您需要确保加载jQuery库以执行代码。。。它突然无缘无故地工作了，只是修改并重新保存了两次php文件。非常感谢你。你太棒了！！