Sto provando a creare un cursore di immagini (precedente/successivo) in modo che le immagini scorrano verso sinistra quando faccio clic su "precedente" ea destra quando faccio clic su "Avanti" con 0,5s di lentezza, quindi ci vuole un po 'di animazione. E quando raggiungo l'ultima immagine e clicco su "avanti", voglio che le immagini "scorrano all'indietro" al primo, lo stesso quando sono nel primo e clicco su "precedente", quindi "avanza" fino a quando il l'ultimo.Cursore delle immagini con altezza non definita
Voglio lo stesso comportamento this JSFiddle spettacoli. (ma non ho bisogno del timer per spostare le immagini automaticamente e non ho bisogno dei pulsanti "grilletti", solo "precedente" e "successivo").
Il problema qui è che le mie immagini non hanno dimensioni fisse. Definisco una larghezza in percentuale e non posso definire un'altezza perché ho un design reattivo, l'immagine viene ridimensionata mentre ridimensiono la finestra del browser.
Il jQuery per le azioni precedenti/successive è piuttosto semplice, ma non riesco a trovare un modo per aggiungere questa animazione quando rimuovo/aggiungo la classe "attiva" alle mie immagini (in modo che diventino visibili o meno).
Ho già provato a mettere tutte le immagini una accanto all'altra e mostrare solo la prima (l'impostazione della larghezza del contenitore equivale alla larghezza dell'immagine), quindi quando faccio clic su "Avanti", "sposta" il contenitore a sinistra in modo che inizi per visualizzare l'immagine successiva, ma non funziona perché una volta che non riesco a definire l'altezza delle immagini, esse appariranno una sotto l'altra, non una accanto all'altra.
HTML
<div class="images">
<img class="active" src="1.jpg">
<img src="2.jpg">
<img src="3.jpg">
</div>
<div class="previous">previous</div>
<div class="next">next</div>
CSS
img {
width: 100px;
display: none;
float: left;
}
img.active {
display: block;
}
jQuery
$('.next').on('click', function() {
var active = $('img.active');
var next = active.next('img');
if (next.length) {
active.removeClass('active');
next.addClass('active');
} else {
active.removeClass('active');
$('.images img:first').addClass('active');
}
});
Se si desidera un effetto di scorrimento, perché non si dovrebbe spostare ogni immagine a sinistra, quindi utilizzare la transizione css3 in 'img.active' per ottenere ogni immagine attiva su' left: 0px; 'ho limitato css3 - animazione abilità ma è il concetto che vedo le persone usano. – ArchNoob