StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>If you have images and text I would preload the images and store the text for each slide in an array. It depends upon the transition effect you want between slides as to how I'd set them up in the DOM.</p> <p>If you're preloading a lot you've the option of keeping a holding image on-show until they're all loaded or setting some sort of flag so the next image is picked from the pool of currently-loaded images if you want action as quickly as possible,</p> <p>Simple image preloader:</p> <pre><code>twdc.preloadimage = function(imagepath) { var oImg = new Image(); oImg.onload = function(){} oImg.src = imagepath; } </code></pre> <p>You could use the onload function to push the imagepath into an array of fully-loaded images and have the roller cycle through that.</p> <p>If I were fading one out and the next in, I'd only have two slide elements - load up the next slide in the DIV (or whatever) with the lower Z-index then fade out the current slide, revealing the next. Then I'd copy the contents of the background slide to the foreground (the user won't notice this) and set it's opacity to 100. Then you can repeat the process.</p> <p>Otherwise you're mucking about with multiple z-indices which if you have 50.. this also simply scales to any number of images.</p> <p>I can't be sure about the speed aspect but my guess is it wouldn't be noticeable unless the machine is very low-powered.</p> <p>If you're sliding the elements in, a UL / LI layout would work. Set the UL to position:absolute and adjust the style.left to reveal the next. Again, you could have an LI for each image or just have 2 and do as above - eg if your images are 100px wide, set the UL to 200px with a masking DIV containing it of 100px width. <img src="https://i.stack.imgur.com/BTXMA.jpg" alt="illustration of side-sliding roller layout"> Load up image 2 in LI no.2 then transition the UL left from offset 0 to -100px revealing #2. Then load this same image 2 into LI no.1 and set the style.left of the UL back to 0 - repeat the process..</p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload