Slider: Regola CSS per impostare l’altezza al caricamento

Quando si sviluppa uno slider (ad esempio utilizzando un plugin come FlexSlider o Swiper) con una larghezza variabile (ovvero sia full-width che dentro ad un div container) può capitare che durante il caricamento vediamo il contenuto subito sotto allo slider nella posizione che dovrebbe occupare quest’ultimo. Succede perché la prima immagine non è stata ancora caricata e quindi il browser non conosce ancora la sua altezza.

Slider FlexSlider Swiper Altezza

Per ovviare questo problema possiamo ricorrere ad un piccolo trucco che calcola tramite una proporzione il padding in percentuale da utilizzare come segnaposto in attesa che venga caricata la foto.

In poche parole assegnamo un’altezza in percentuale al contenitore dell’immagine che verrà caricata.

Ad esempio utilizzando flex-slider abbiamo questo HTML:

<div class="flexslider">
<ul class="slides">
<li><img src="slide1.jpg" alt="" /></li>
<li><img src="slide2.jpg" alt="" /></li>
<li><img src="slide3.jpg" alt="" /></li>
</ul>
</div>

Mentre il CSS che bisogna aggiungere è questo:

.flexslider{
/*
Padding Bottom = (Image Height / Image Width) * 100%
800 / 2000 * 100
*/
height: 0;
padding-bottom: 40%;
}

Ovviamente a seconda delle dimensioni della foto cambia la percentuale in base alla proporzione scritta sopra nel commento del codice:

Padding Bottom = (Image Height / Image Width) * 100%

Ho utilizzato questo snippet in diversi siti e principalmente per sistemare il problema in slider a larghezza piena. Questo però non esclude che si possa utilizzare per banner con immagini in background o per altre necessità legate ad esempio ad immagini caricate in lazy load.

Spero di essere stato chiaro e che possa servire a qualcuno!

Posted in CSS.

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *

Questo sito usa Akismet per ridurre lo spam. Scopri come i tuoi dati vengono elaborati.