StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<blockquote> <p><strong>tl;dr</strong> - Example: <a href="http://jsbin.com/ufoceq/8/" rel="nofollow noreferrer">http://jsbin.com/ufoceq/8/</a> </p> </blockquote> <hr> <p>A simple approach to create an infinite image slider without too much effort is as follows: let say for the sake of simplicity that you have <code><n></code> images to slide in a loop, so that after the <code>n</code><sup>th</sup> image the next one to visualize is the <code>1</code><sup>st</sup> (and vice-versa).</p> <p>The idea is to create a clone of first and last image so that</p> <ul> <li>the clone of the last image is prepended before the first one;</li> <li>the clone of the first image is appended after the last one.</li> </ul> <p>Whatever is the amount of your images, you will need to append at most only 2 cloned elements.</p> <p>Again for the simplicity, let say that all images are <code>100px</code> wide and they're wrapped in a container that you move left/right into a clipped mask with <code>overflow: hidden</code>. Then, all images can be easily aligned in a row with <code>display: inline-block</code> and <code>white-space: nowrap</code> set on the container (with <code>flexbox</code> now it is even easier).</p> <p>For <code>n = 4</code> The DOM structure would be something like this:</p> <pre><code>offset(px) 0 100 200 300 400 500 images | 4c | 1 | 2 | 3 | 4 | 1c /* ^^ ^^ [ Clone of the last image ] [ Clone of the 1st image ] */ </code></pre> <p>At the beginning, your container will be positioned with <code>left: -100px</code> (or also <code>margin-left: -100px</code> <a href="http://paulirish.com/2012/why-moving-elements-with-translate-is-better-than-posabs-topleft/" rel="nofollow noreferrer">or even better (for a matter of performance)</a> <code>transform: translateX(-100px)</code> ), so the slider can show the first image. To switch from an image to another you will need to apply a javascript animation over the same property you've previously chosen.</p> <p>When your slider is currently at the 4<sup>th</sup> image, you have to switch from image <code>4</code> to <code>1c</code>, so the idea is to execute a callback at the end of the animation that soon reposition your slider wrapper at the real 1<sup>st</sup> image offset (e.g. you set <code>left: -100px</code> to the container)</p> <p>This is analogous when your slider is currently positioned on the 1<sup>st</sup> element: to show the previous image you just need to perform an animation from image <code>1</code> to <code>4c</code> and when animation has been completed you just move the container so the slider is istantly positioned at the 4<sup>th</sup> image offset (e.g. you set <code>left: -400px</code> to the container). </p> <hr> <p>You can see the effect on the above fiddle: this is the minimal <code>js/jquery</code> code I used (of course the code can be even optimized so the width of the items is not hardcoded into the script)</p> <pre><code>$(function() { var gallery = $('#gallery ul'), items = gallery.find('li'), len = items.length, current = 1, /* the item we're currently looking */ first = items.filter(':first'), last = items.filter(':last'), triggers = $('button'); /* 1. Cloning first and last item */ first.before(last.clone(true)); last.after(first.clone(true)); /* 2. Set button handlers */ triggers.on('click', function() { var cycle, delta; if (gallery.is(':not(:animated)')) { cycle = false; delta = (this.id === "prev")? -1 : 1; /* in the example buttons have id "prev" or "next" */ gallery.animate({ left: "+=" + (-100 * delta) }, function() { current += delta; /** * we're cycling the slider when the the value of "current" * variable (after increment/decrement) is 0 or when it exceeds * the initial gallery length */ cycle = (current === 0 || current > len); if (cycle) { /* we switched from image 1 to 4-cloned or from image 4 to 1-cloned */ current = (current === 0)? len : 1; gallery.css({left: -100 * current }); } }); } }); }); </code></pre> <hr> <p>As mentioned before, this solution doesn't require really much effort and talking about performance, comparing this approach to a normal slider without looping, it only requires to make two additional DOM insertion when the slider is initialized and some (quite trivial) extra logic to manage a backward/forward loop.</p> <p>I don't know if a simpler or better approach exists, but hope this helps anyway.</p> <p><strong>Note</strong>: if you need to also have a responsive gallery, maybe <a href="https://stackoverflow.com/a/15920259/1098851">this answer</a> may help too</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