Come costruire una galleria di immagini reattive attraente con slick.js

In questo tutorial utilizzeremo slick.js, un popolare plug-in di jQuery, per creare una galleria di immagini reattiva e accattivante. Ecco la galleria che creeremo:

Assicurati di controllare la versione a schermo intero e ridimensionare la finestra del browser per vedere come il suo layout cambia in base alla dimensione del viewport.

Cos'è slick.js?

Slick.js è un noto plugin jQuery creato da Ken Wheeler che ti consente di creare bellissimi caroselli reattivi. Per capire meglio cosa questo plugin può offrirti, consulta la documentazione.

Fortunatamente, funziona non solo in tutti i browser moderni, ma anche in alcuni più vecchi come IE 8+.

Infine, potresti voler dare un'occhiata alla versione di WordPress.

Introduzione a slick.js

Per iniziare con slick, inizia scaricando e installando i seguenti file nel tuo progetto:

• jQuery (≥1.7)
• slick.css o la sua versione minificata
  
• slick.js o la sua versione minificata

Opzionalmente, potresti voler importare il chiazza di petrolio-theme.css file.

Puoi prendere una copia dei corrispondenti file slick visitando il repository Github, utilizzando un gestore di pacchetti (ad es. Npm) o caricando le risorse necessarie attraverso un CDN (ad esempio cdnjs). Per questo tutorial, sceglierò l'ultima opzione.

Inoltre, ho incorporato Babel per compilare il codice ES6 fino a ES5 e Lodash per sfruttarlo antirimbalzo funzione (lo useremo più tardi).

Con questo in mente, se guardi sotto il impostazioni scheda della nostra penna dimostrativa, vedrai che ho incluso un file CSS esterno e tre file JavaScript esterni.

Impostazioni CSS su CodePenImpostazioni JavaScript su CodePen

1. L'HTML

A questo punto è importante capire la struttura della nostra pagina. Ancora più importante, definiremo due caroselli che hanno le stesse immagini e sono sincronizzati (discuteremo di come in seguito). Le dimensioni dell'immagine sono di 860 x 550 pixel, anche se nei tuoi progetti potrebbero essere diverse. 

Infine, come parte del secondo carosello, specificheremo le frecce di navigazione e un elemento che tiene traccia del numero totale di diapositive.

Ecco la struttura richiesta per la nostra pagina demo:

Carousel sta caricando ... 
 
 
 
 
 
  
  
 
 
 
 
  
  
 
       
 
  
 
 
 

2. Il CSS

In totale, la nostra galleria dovrebbe avere quattro diverse apparenze, a seconda del viewport disponibile. Vediamoli seguendo un approccio mobile-first.

Quando la finestra del browser è inferiore a 480px, dovrebbe apparire così, con solo il secondo carosello e la navigazione che appaiono:

Layout del carosello su schermi extra piccoli

Quindi, su schermi tra 480px e 768px, dovrebbe essere il seguente, con due miniature sotto la diapositiva principale:

Layout del carosello su schermi piccoli

Successivamente, nelle schermate tra 769px e 1023px, introdurremo una terza miniatura:

Layout del carosello su schermi medi

Infine, su schermi di grandi dimensioni (≥1024px), dovrebbe essere il seguente, con le miniature che appaiono a lato (si noti che non si adattano completamente a questa immagine nella loro interezza):

Layout del carosello su schermi di grandi dimensioni

Tutti i casi di cui sopra sono soddisfatti nelle domande dei media mostrate di seguito:

.synch-carousels position: relativo; display: flex; flex-wrap: wrap; justify-content: space-between;  .synch-carousels> * width: 100%;  .synch-carousels .right order: -1;  .synch-carousels .left overflow: hidden;  .synch-carousels .gallery display: none;  .synch-carousels .gallery .slick-list height: auto! important; margine: 0 -20px;  .synch-carousels .gallery .slick-slide margin: 0 20px;  @media screen e (min-width: 480px) .synch-carousels .right margin-bottom: 20px;  .synch-carousels .gallery display: block;  @media screen e (min-width: 1024px) .synch-carousels .right position: relative; larghezza: calc (100% - 230px); margin-bottom: 0; ordine: 2;  .synch-carousels .left width: 210px;  .synch-carousels .gallery .slick-slide margin: 0 0 20px 0;  .synch-carousels .gallery .slick-list margin: 0; 

Notate che c'è un !importante regola. Questo sovrascrive uno stile fluido in linea.

3. Il JavaScript

Passiamo ora alla nostra attenzione alle cose relative a JavaScript.

Selettori di memorizzazione nella cache

Quando il DOM è pronto, come buona pratica nascondiamo alcuni selettori usati comunemente:

const $ left = $ (". left"); const $ gl = $ (". gallery"); const $ gl2 = $ (". gallery2"); const $ photosCounterFirstSpan = $ (". photos-counter span: nth-child (1)");

Inizializzazione dei caroselli

Quindi inizializziamo e sincronizziamo i nostri due caroselli. Il codice responsabile di questo comportamento è il seguente:

$ gl.slick (rows: 0, slidesToShow: 2, arrows: false, draggable: false, useTransform: false, mobileFirst: true, responsive: [breakpoint: 768, settings: slidesToShow: 3, breakpoint: 1023, impostazioni: slidesToShow: 1, vertical: true]); $ gl2.slick (rows: 0, useTransform: false, prevArrow: ".arrow-left", nextArrow: ".arrow-right", fade: true, asNavFor: $ gl);

Senza dubbio, il modo migliore per capire come funziona questo codice è leggere la documentazione scorrevole. Tuttavia, lascia che ti spieghi due cose importanti qui:

• Il asNavFor l'opzione di configurazione ci consente di sincronizzare i caroselli e usarne uno come navigazione per l'altro.
• Per impostazione predefinita, slick utilizza trasformazioni CSS. Nel nostro caso però, li disabilitiamo impostando useTransform: false. Questo perché causano un piccolo sfarfallio nella prima diapositiva del primo carosello su schermi di grandi dimensioni (potremmo averli disabilitati solo per il primo carosello).

Visualizzazione e personalizzazione del layout della galleria

La nostra galleria dovrebbe essere visibile solo quando tutte le risorse della pagina sono pronte. Inizialmente, appare un preloader opzionale: fare nuovamente riferimento al markup, appare come questo:

Carousel sta caricando ... 

A questo punto, dobbiamo pensare ancora al layout della galleria desiderato su schermi di grandi dimensioni. Se guardi indietro agli screenshot corrispondenti, noterai che entrambi i caroselli hanno le stesse altezze. Per ottenere quel comportamento desiderato, dobbiamo scrivere un codice JavaScript personalizzato (oltre al nostro CSS). Questo codice imposta dinamicamente l'altezza del primo carosello pari all'altezza del secondo (o viceversa).

Conoscendo i requisiti sopra, ecco il codice che viene eseguito quando l'intera pagina è pronta:

$ (window) .on ("load", () => handleCarouselsHeight (); setTimeout (() => $ (". loading"). fadeOut (); $ ("body"). addClass ("over -visibile ");, 300););

Ed ecco la dichiarazione del handleCarouselsHeight funzione:

function handleCarouselsHeight () if (window.matchMedia ("(min-width: 1024px)"). corrisponde) const gl2H = $ (". gallery2)"). height (); $ left.css ("height", gl2H);  else $ left.css ("height", "auto"); 

Quando la pagina viene caricata, la galleria funziona correttamente. Ma dovrebbe anche funzionare come previsto quando la finestra del browser viene ridimensionata. 

Il codice che si occupa di quella particolare situazione è mostrato di seguito:

$ (window) .on ("ridimensiona", _.debounce (() => handleCarouselsHeight ();, 200));

Si noti che il gestore eventi è racchiuso all'interno di a antirimbalzo funzione. Questa è una funzione di Lodash che ci aiuta a limitare la quantità di volte in cui viene chiamato questo gestore. 

Lavorare con gli eventi e i metodi chiari

Ora che abbiamo implementato con successo le funzionalità principali della nostra galleria, facciamo un ulteriore passo avanti e costruiamo alcune cose opzionali.

Per prima cosa, nell'angolo in alto a destra del secondo carosello mostriamo la diapositiva corrente e il numero totale di diapositive.

Visualizzazione della diapositiva corrente e il numero totale di diapositive

Per fare ciò, sfruttiamo il dentro e afterChange eventi chiari.

Ecco il codice relativo:

/ * devi associare l'evento init prima dell'inizializzazione di slick (vedi demo) * / gl2.on ("init", (event, slick) => $ photosCounterFirstSpan.text ('$ slick.currentSlide + 1 /') ; $ (". photos-counter span: nth-child (2)"). text (slick.slideCount);); $ gl2.on ("afterChange", (event, slick, currentSlide) => $ photosCounterFirstSpan.text ('$ slick.currentSlide + 1 /'););

Come ulteriore miglioramento, ogni volta che clicchiamo su una diapositiva della prima giostra, la diapositiva associata della seconda giostra dovrebbe essere attiva. Grazie a slick slickGoTo metodo, siamo in grado di sviluppare questa funzionalità.

Ecco il codice relativo:

$ (". gallery .item"). on ("click", function () const index = $ (this) .attr ("data-slick-index"); $ gl2.slick ("slickGoTo", indice) ;);

4. Supporto per browser

La demo dovrebbe funzionare bene in tutti i browser recenti e puoi tranquillamente usarla nei tuoi progetti. 

Ho incontrato solo un piccolo bug in alcuni browser (Firefox, Edge) mentre testavo la demo su schermi di grandi dimensioni. Quando fai clic sulle frecce di navigazione, tutte le diapositive del primo carosello si allontanano dal primo, non raggiungono il bordo superiore del genitore e lasciano un singolo pixel gap:

Il bug di un pixel di Slick su alcuni browser

Ultimo ma non meno importante, potrebbero essere necessari piccoli miglioramenti e personalizzazioni in quanto la finestra viene ridimensionata, a seconda delle esigenze.

 Conclusione

In questo tutorial, abbiamo sfruttato slick.js e siamo riusciti a creare una bellissima galleria reattiva. Speriamo ora, sei pronto per provare questa implementazione nei tuoi progetti. Se ciò accade, sentiti libero di condividere il tuo link al progetto nei commenti qui sotto!

Altri progetti JavaScript per aromatizzare i tuoi siti web