tl; dr - Esempio: http://jsbin.com/ufoceq/8/
Un approccio semplice per creare un cursore di immagine infinito senza troppi sforzi è il seguente: diciamo per semplicità che hai <n> immagini da far scorrere in un ciclo, in modo che dopo lo nth l'immagine da visualizzare è la 1st (e viceversa).
L'idea è di creare un clone di prima e l'ultima immagine in modo che
- il clone dell'ultima immagine viene anteposto prima del primo;
- il clone della prima immagine viene aggiunto dopo l'ultimo.
Qualunque sia la quantità delle immagini, è necessario aggiungere al massimo solo 2 elementi clonati.
Sempre per la semplicità, diciamo che tutte le immagini sono 100px larghe e sono avvolte in un contenitore che si sposta a sinistra/destra in una maschera troncata con overflow: hidden. Quindi, tutte le immagini possono essere facilmente allineate in fila con display: inline-block e white-space: nowrap impostate sul contenitore (con flexbox ora è ancora più semplice).
Per n = 4 La struttura DOM sarebbe qualcosa di simile a questo:
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 ]
*/
All'inizio, il vostro contenitore verrà posizionato con left: -100px (o anche margin-left: -100pxor even better (for a matter of performance)transform: translateX(-100px)), in modo che il dispositivo di scorrimento può mostrare la prima immagine. Per passare da un'immagine ad un'altra dovrai applicare un'animazione javascript sulla stessa proprietà che hai precedentemente scelto.
Quando il cursore è attualmente al l'immagine del 4 °, è necessario passare da un'immagine 4-1c, quindi l'idea è quella di eseguire un callback al termine dell'animazione che presto riposizionare il tuo involucro cursore al Real 1 st offset dell'immagine (ad es.si imposta left: -100px al contenitore)
Questo è analogo quando il cursore è attualmente posizionato sul elemento 1 °: per visualizzare l'immagine precedente è sufficiente per eseguire un'animazione da un'immagine 1-4c e quando l'animazione è stata completato è sufficiente spostare il contenitore in modo che il cursore sia posizionato immediatamente sullo scostamento dell'immagine 4 (ad esempio, è possibile impostare left: -400px nel contenitore).
Potete vedere l'effetto sul violino sopra: questo è il js/jquery codice minimo che ho usato (ovviamente il codice può essere anche ottimizzato in modo che la larghezza delle voci non è codificata nello script)
$(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 });
}
});
}
});
});
Come accennato prima, questa soluzione non richiede veramente molto sforzo e si parla di prestazioni, confrontando questo approccio ad un cursore normale senza loop, richiede soltanto fare due inserimento DOM supplementare quando il cursore viene inizializzato e alcuni (abbastanza banale ial) logica aggiuntiva per gestire un ciclo avanti/indietro.
Non so se esiste un approccio più semplice o migliore, ma spero che questo aiuti comunque.
Nota: se avete bisogno di avere anche una galleria reattivo, forse this answer può aiutare anche
Grazie per la spiegazione dettagliata! – user1828928
@ user1828928 se sei interessato ad un esempio dal vivo ho creato un violino breve – fcalderan
Mi dispiace per la prima bandiera. Penso che i fili siano stati incrociati lì, perché hai ragione riguardo allo stato di wiki qui. –