如何制作图像的自适应自动幻灯片？

Question

我在网站上使用了自适应引导程序设计，我想为当前图像添加一个部分以自动旋转。 在全屏尺寸下，我的图像在左侧，文本在右侧。 在引导程序调整大小之前，一切看起来都很好。 该位置是绝对的，并且文本元素位于图像的顶部。 当我将位置更改为相对时，它看起来很好，只是在它褪色时在其下方显示了其他图像。 我如何才能实质上将其他图像加载到同一位置？

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;
}