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

Question

我在我的网站上使用了响应式引导程序设计，我想为当前图像添加一个部分以自动旋转。在全屏尺寸下，我的图像在左侧，文本在右侧。这一切看起来都很好，直到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;
}