javascript slide show, struggling for several days now.. |
javascript slide show, struggling for several days now.. |
khobo |
Aug 14 2017, 09:27 AM
Post
#1
|
Group: Members Posts: 1 Joined: 14-August 17 Member No.: 26,476 |
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 |
Christian J |
Aug 14 2017, 02:21 PM
Post
#2
|
. Group: WDG Moderators Posts: 9,661 Joined: 10-August 06 Member No.: 7 |
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? That might be because the images are "position: absolute", which prevents them from affecting the page flow. |
pandy |
Aug 14 2017, 10:40 PM
Post
#3
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,733 Joined: 9-August 06 Member No.: 6 |
|
Lo-Fi Version | Time is now: 28th April 2024 - 07:12 AM |