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

Question

I am using a responsive bootstrap design on my website and I want to add a section for the current image to automatically rotate. At full screen size, I have the image on the left and text on the right. This all looks fine until bootstrap adjusts the size. The position is absolute and the text element is right on top of the images. When I change the position to relative, it looks fine except the other images display beneath it while it is fading. How can I essentially make the other images load at the same place?

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

Tries to set aa height to slideshow

#slideshow {
   height: 300px;
}

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