如何制作圖像的自適應自動幻燈片？

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