Molte persone sul proprio sito vogliono vedere gli slider: si tratta di blocchi che mostrano un elemento di contenuto sullo schermo e, dopo un certo periodo di tempo, cambiano questo contenuto in un altro. Naturalmente, ogni sviluppatore web è in grado di creare autonomamente uno slider utilizzando HTML, CSS e JavaScript, ma questo non ha sempre senso. Trascorrerai molto tempo, nonostante ci siano alcune soluzioni già pronte su Internet che ti semplificano la vita e rendono il tuo sito molto più attraente. Questo articolo si concentrerà su una di queste soluzioni chiamata Owl Carousel. L'impostazione di questo dispositivo di scorrimento è incredibilmente semplice, quindi anche un principiante può gestirlo. Ora imparerai cos'è questo dispositivo di scorrimento, oltre ad altri dettagli importanti. La configurazione di Owl Carousel è un processo passo dopo passo, quindi dovresti studiare questo materiale solo in ordine.
Che cos'è e perché dovresti scegliere questo particolare slider?
Owl Carousel, la cui configurazione sarà discussa in questo articolo, è un plugin molto efficace che aggiunge un bellissimo e comodo slider alla tua pagina, che faciliterà notevolmente il tuo lavoro sul sito,risparmiando un sacco di tempo, fatica e denaro. Quali sono i vantaggi di questo particolare plugin, perché ci sono molti slider sul Web? Il fatto è che questo slider ti offre decine di opzioni di personalizzazione, che ti permetteranno di rendere la tua pagina unica e inimitabile. È un plug-in reattivo che funzionerà su tutte le versioni del browser e può essere facilmente collegato a WordPress e ad altri CMS popolari. In generale, questo slider ha molti vantaggi, quindi dovresti assolutamente fare una scelta a suo favore. Tuttavia, prima di iniziare a configurare Owl Carousel, questo plug-in deve ancora essere caricato.
Scarica
La configurazione di Owl Carousel 2 non è possibile se non l'hai scaricata sul tuo computer e, poiché questa è un'istruzione passo-passo, dovresti iniziare dall'inizio. Quindi, il programma può essere scaricato utilizzando i gestori di pacchetti, ma questi sono strumenti di sviluppo avanzati, quindi qui ti diremo come ottenere questo plugin in modo standard. Devi andare sul sito ufficiale del plugin e scaricare la sua ultima versione. Dopodiché, tutti i file scaricati devono essere trasferiti nella directory del tuo sito, dopo aver preparato una comoda cartella, che ha lo stesso nome del plugin stesso. Nota che questo plugin è in bundle con jQuery, quindi devi avere anche quella libreria disponibile. Bene, una volta scaricato questo plugin, dovrai occuparti del passaggio successivo che è l'impostazione del dispositivo di scorrimento del carosello del gufo 2.
CSS
BLe impostazioni di Owl Carousel 1.3 rimangono quasi le stesse della versione 2 più recente, vengono aggiunte solo nuove funzionalità. Tuttavia, le informazioni di base saranno le stesse, a partire dall'aggiunta di CSS al documento. Quindi il primo passo è aggiungere la linea. Cosa ti dà? Questa è una stringa che carica gli stili necessari nel sito per visualizzare lo slider. Qui è dove puoi finire eseguendo tu stesso l'elaborazione visiva. Tuttavia, esiste una soluzione più comoda e veloce. Puoi anche aggiungere una linea che carichi anche il tema predefinito del dispositivo di scorrimento, rendendolo immediatamente pronto per l'uso. Puoi modificare alcuni stili per rendere il tuo dispositivo di scorrimento più unico e diverso e più adatto ai tuoi contenuti. Naturalmente, le impostazioni di Owl Carousel in russo sarebbero molto convenienti, ma ogni persona che crea siti Web dovrebbe capire che non può fare a meno della conoscenza dell'inglese.
Connessione JavaSpript
Ovviamente, lo slider non funzionerà senza JS, quindi dovresti anche aver cura di includere il file appropriato contenente il codice necessario. Per fare ciò, è necessario inserire una riga di codice dalla documentazione, tuttavia una condizione deve essere soddisfatta. Tutti sanno che JS è un linguaggio di programmazione che esegue tutti i comandi in ordine, quindi in questo caso dovresti aggiungere questa riga di codice dopo la riga che aggiunge la libreria jQuery al tuo documento. Più con JS nel caso di questo dispositivo di scorrimento, non hai nulla da farebisogno.
Codifica HTML
Bene, hai collegato lo slider, ora è il momento di progettarlo e personalizzarlo. Prima di tutto, devi scrivere il codice HTML affinché lo slider appaia sulla tua pagina. Per fare ciò, è necessario creare un contenitore che conterrà le diapositive. Questo può essere fatto usando il tag div, che deve essere assegnato alla classe owl-carousel. È questa classe che garantisce l'attivazione di tutti gli stili relativi allo slider. Puoi anche scrivere un' altra classe: il tema del gufo. Ti tornerà utile se decidi di utilizzare il design predefinito o di prendere la versione standard del dispositivo di scorrimento come base per ulteriori lavori.
Quindi devi aggiungere ogni diapositiva in un contenitore separato con un tag div. Ovviamente puoi usare altri tag, ma questo tag è il migliore per gli slider.
Plugin di chiamata
E l'ultima cosa che devi fare per avere uno slider già pronto sul tuo sito è usare questo blocco di codice:
$(documento).ready(funzione(){
$(".owl-carousel").owlCarousel();
});
Assicura che il dispositivo di scorrimento inizi a funzionare, ad es. scorrere il contenuto, quando la pagina viene caricata. Con lo stesso codice, puoi connettere Owl Carousel a WordPress. Le impostazioni di questo plugin sono numerose e varie e ora imparerai a conoscere i punti più chiave.
Impostazione dell'aspetto e della funzionalità del dispositivo di scorrimento
Quindi quali comandi puoi usare per personalizzare il tuo slider? Prima di tutto, devi ricordare il comando elementi, perché con esso puoi impostare un numero specifico di diapositive nel tuo dispositivo di scorrimento. Il comando loop ti consentirà di scegliere se eseguire il loop del dispositivo di scorrimento o interrompere lo scorrimento sull'ultimo elemento. C'è anche il comando Trascina, che ha diverse opzioni, come il mouse e il tocco. Nel primo caso, puoi fare in modo che gli elementi del tuo slider possano essere strisciati tenendo premuto il mouse e, nel secondo caso, con l'aiuto di un tocco (questo comando è adatto per dispositivi mobili). Un altro comando importante è nav, che abilita la visualizzazione delle frecce di navigazione. Insieme ad esso, puoi usare il comando navText per aggiungere etichette ai pulsanti di navigazione. Inoltre, non dovresti dimenticare il comando di riproduzione automatica, che ti consente di abilitare e disabilitare l'avvio automatico della rotazione delle diapositive del tuo dispositivo di scorrimento quando la pagina viene caricata. Con questo comando puoi anche utilizzare autoplayTimeout, per il quale puoi impostare un valore specifico in millisecondi, che determinerà il tempo che intercorre tra la rotazione automatica di ciascuna delle diapositive.
Se utilizzi il responsive web design, ovvero il design della tua pagina cambia automaticamente a seconda del dispositivo su cui viene visualizzata, devi assolutamente ricordare il comando responsive, che ti consente di impostare il numero di diapositive da visualizzare in base alla larghezza dello schermo su cui viene visualizzata la pagina.
