javascript slide show, struggling for several days now.. Options

[khobo]

i'm using a javascript slide show and i want text to display underneath.. however the div box is collapsing and making the text underneath go up under the images.. how can i fix this? i've tried float clearing.. defining a specific height but that loses it's responsiveness. also i can't seem to center the slide show either.. it doesn't see how big the image is and puts the leading edge of the image in the center instead of the middle. is this too confusing?

ultimately.. i want a slide show that i can center in the page.. that's responsive and that holds its height so i can put text underneath it


java script:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script>
$(function(){ $('.fadein img:gt(0)').hide(); setInterval(function(){ $('.fadein :first-child').fadeOut() .next('img').fadeIn() .end().appendTo('.fadein');}, 3250);});

$(function(){ $('.fadein-bottom img:gt(0)').hide(); setInterval(function(){ $('.fadein-bottom :first-child').fadeOut() .next('img').fadeIn() .end().appendTo('.fadein-bottom');}, 3250);});
</script>

css:

.fadein { position:relative; max-width:100%;}
.fadein img {position:absolute; max-width:100%; margin-right:auto; margin-left:auto;}

html:
<div class="fadein">
<img src="zimgs-books/archive/prostatitis/01.jpg" style="max-width:100%;>
<img src="zimgs-books/archive/prostatitis/02.jpg" style="max-width:100%;>
<img src="zimgs-books/archive/prostatitis/03.jpg" style="max-width:100%;>
<img src="zimgs-books/archive/prostatitis/04.jpg" style="max-width:100%;>
</div>

This post has been edited by khobo: Aug 14 2017, 09:28 AM