javascript - 如何为图像制作响应式自动幻灯片？

Question

我在我的网站上使用响应式 Bootstrap 设计，我想添加一个部分让当前图像自动旋转。在全屏尺寸下，我的图像位于左侧，文本位于右侧。在 Bootstrap 调整大小之前，这一切看起来都很好。位置是绝对的，文本元素位于图像的正上方。当我将位置更改为相对位置时，它看起来很好，除了在褪色时其他图像显示在其下方。我怎样才能让其他图像加载在同一个地方？

Javascript

<script>
$("#slideshow > div:gt(0)").hide();
setInterval(function() { 
    $('#slideshow > div:first')
    .fadeOut(2000)
    .next()
    .fadeIn(2000)
    .end()
    .appendTo('#slideshow');
},  6000);
</script> 


CSS

#slideshow > div { 

top: 10px; 
left: 10px; 
right: 10px; 
bottom: 10px; 
}


HTML

<div id="home-about">
    <div class="container">
        <div class="row">
            <div id="slideshow" class="col-md-6">
               <div>
                 <img src="img/events/sched1.jpg" class="img-responsive img-shadow">
               </div>
               <div>
                 <img src="img/events/sched2.jpg" class="img-responsive img-shadow">
               </div>
               <div>
                 <img src="img/events/sched3.jpg" class="img-responsive img-shadow">
               </div>
            </div>
            <div class="col-md-6">
                <div class="about-text">
                    <div class="section-title">
                        <h4>test</h4>
                        <h2>hello</h2>
                        <br>
                        <div class="clearfix"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

Answer 1

尝试设置幻灯片的高度

#slideshow {
   height: 300px;
}

#slideshow > div {
   top: 10px;
   left: 10px;
   right: 10px;
   bottom: 10px;
   position: absolute;
}