Probblema nel visualizzare le immagini del database

[NLSweb]

se vuoi farle scorrere da sinistra verso destra , devi impostare il display della lista in inline

[mexonline]

e se il tempo non è quello esatto cioè ----> (durata transizione + durata fermo immagine) * num di immagini
l'animazione continua sempre senza fermarsi no? o non parte neanche?

[NLSweb]

il tempo serve solo per sincronizzare la sequenza delle immagini
l'animazione e' continua avendo impostato animation-count infinite
per eseguire l'animazione devi solo associare la classe (che contiene l'animazione) alla lista
dammi un po' di tempo e ti scrivo un esempio..

[NLSweb]

ecco l'esempio solo con css

come potrai vedere la classe dell'animazione e' associata alla lista che si muove dentro il div

e i @keyframes sono divisi con questo sistema:

da 0% a 15% fermo immagine della prima foto
da 15% a 25% cambio immagine (quindi faccio scorrere la foto)
e cosi' via dicendo , alla fine torno alla posizione iniziale

le percentuali (ovvero le posizioni dei @keyframes) variano in base al numero di foto e alla durata che vuoi dare alle transizioni e al fermo immagine.

[NLSweb]

p.s.

per il riposizionamento finale ti consiglio di usare anche un cambio di opacita'
quindi fai sparire le foto , sposta , fai riapparire , continua l'animazione

[mexonline]

Sisi grazie :) tutto chiaro domani vedo il codice del tuo esempio grazie per il tempo che hai speso

[mexonline]

Usero il primo esempio come spunto cercando di adattarlo perche ho notato che sul mio cellulare và solo il primo esempio

[mexonline]

grazie ho adattato il tuo codice per gli script.. adesso sto cercando un modo per togliere lo spazio da un li all'altro.. che senno le immagini muovendosi a volte si vedono tutte a volte manca 5 px in basso, a volte 10.. però questo problema lo avuto inserendo il codice nel resto della pagina. qui tutto bene ma adattandolo al resto della pagina ho un piccolo spazio di 5px da un immagine all'altra come toglerlo? adesso le immagini sono 3 e 5 px ogni immagine sposta di 10 px soltanto.. ma se le immagini diventano 21 sono 100 px di errore

[NLSweb]

se le immagini hanno tutte la stessa dimensione , non dovrebbe essere un problema ..
lo spostamento dovrebbe sempre essere la dimensione dell'altezza della foto.
a meno che tu non usi un margin o un padding ...
come potrai vedere nel codice del primo esempio al <li> viene data una correzione (left:-40px;bottom:16px;) per farlo centrare nel div
dopo , una volta centrato , lo spostamento e' della dimensione del height del img
ti consiglio (prima di eseguire le animazioni) di centrare l'immagine del div in modo da non avere problemi di sfalzi di px

[mexonline]

Sisi ho fatto come dicevi.. infatti il -40 lo messo a 0 perche a -40 lasciava vuoto la parte destra del div
Le immagini sono tutte uguali come dici tu ho già provato a toglere il padding superiore.. forse è quello inferiore a dover essere tolto, ma scrivendo solo padding:0px; si dovrebbero toglere su tutti e 4 i lati..
Il mio problema è che tra un immagine e un altra cè un leggero spazio di 5px, provando ad aggiungere altri link di foto ad ogni foto che passa i pixel aumentano di 5 per lo spazio tra un immagine all'altra, se nella pagina cè solo quel codice tutto funziona perfettamente ma all'interno del resto della pagina non và per quello spazietto da un immagine all'altra ma ckn il padding non si togle.. se no creare un ciclo dove ogni volta l'altezza dell'immagine da ruotare aumenta di 5 e scrivo il numero all'interno del "bottom": variabile; ma non so neanche se stamperebbe il giusto numero..
A fine ciclo aumento la variabile +5; come per la $i che mi da il numero di immagini

[NLSweb]

qui puoi vedere la struttura del padding e del margin

io ti consiglio di non usare ne padding ne margin ne border ed usare solo l'altezza della foto

ma nel caso tu debba usare una di queste funzioni allora per eseguire lo spostamento devi aggiungere al height del img il o i valori della/e funzioni

esempio:
altezza img = 100 ; padding = 20 ; border = 0 ; margin = 5
dimensione totale per lo spostamento sara' 100 + 20*2 + 0 + 5*2
chiaramente per il padding e il margin ho raddopiato il valore poiche' comprende sia sopra che sotto

esempio2:
altezza img = 100 ; padding-top = 20 ; border = 0 ; margin-left = 10
dimensione totale per lo spostamento sara' 100 + 20 + 0 + 0
il padding e' solo in alto quindi solo una volta , il border non c'e' e il margin e' relativo al lato quindi non interessa allo scorrimento verticale

se vuoi/puoi posta il link o il codice cosi' posso capire meglio

[mexonline]

tutto chiaro il problema non era nei padding o nel altezza della foto che padding e i margini non c'erano neanche i bordi.. era facile ho risolto l'immagine era alta 190 +5 di spazio sotto ogni una e adesso funziona tutto, (lo spazio sotto l'immagine non so perche c'è il padding il margin e il border nelle immagini li ho tutti messi a 0 stamattina perche anche io pensavo che c'era qualche padding, margin o border espresso nel header che li applica ad ogni div.. adesso è tutto risolto e funziona alla perfezione.. ecco il link della pagina dove l'ho applicato

[mexonline]

grazie per tutto il tuo aiuto

[NLSweb]

..prego , di nulla .. e buon lavoro !