Logo Informatizzati

Lo script Slick slider genera script gradevoli ma produce un punteggio basso per il paramentro CLS (Cumulative Layout Shift). Per aumentare tale punteggio è importante che lo slider abbia lo stesso aspetto anche prima che lo script di Slick entri in funzione.

Se ad esempio il numero di slide da mostrare è 5 bisogna imposta il CCS in modo da nascondere tutto meno le prime 5 slide e dargli una dimensione. Nell'esempio sostituire la classe ax-slider con la propria classe.

.ax-slider > li:not(:nth-child(-n+5)) {
   display: none;
 }
 .ax-slider > li:nth-child(-n+5) {
   float: left;
   width: calc(100% / 5);
   margin-bottom: 50px !important;
 }

Nel caso in cui le slide siano 4 basta cambiare il numero di child ed eventualmente la dimensione

 .ax-slider > li:not(:nth-child(-n+4)) {
   display: none;
 }
 .ax-slider > li:nth-child(-n+4) {
   float: left;
   width: calc(100% / 4);
   margin-bottom: 50px !important;
 }

Infine questa è la configurazione per uno slider che mostri una sola slide

.ax-slider > li:not(:first-child) {
   display: none;
}
.ax-slider > li:first-child {
 float: left;
 margin-bottom: 50px !important;
}

Tags

Commenti offerti da CComment