CONTATTACI

Blog

Sviluppatore dall'aria dubbiosa che si interroga su che cos'è jquery

jQuery tutorial: come costruire un carosello con jQuery

Il carosello, o slider, croce e delizia di ogni web developer alle prime armi, è un elemento comune nelle moderne interfacce utente che offre un modo dinamico e accattivante per visualizzare contenuti in modo sequenziale. In questo tutorial, esploreremo come costruire un carosello utilizzando jQuery, una libreria JavaScript molto popolare. La visualizzazione all’interno della pagina web renderà il sito dinamico e “moderno”, avendo uno slider che compie “dei giri” sugli elementi da visualizzare (tipicamente immagini).

Preparazione dell’Ambiente, jQuery CSS e jQuery HTML

Prima di iniziare a creare il nostro carosello, assicuriamoci di avere l’ambiente di sviluppo pronto. Avremo bisogno di un documento HTML di base e di un file CSS per la struttura e lo stile, oltre al file jQuery ready che includeremo nel nostro progetto.

 

 1. <!DOCTYPE html>
 2. <html lang="it">
 3. <head>
 4.     <meta charset="UTF-8">
 5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6.     <link rel="stylesheet" href="style.css">
 7.     <title>Carosello con jQuery</title>
 8. </head>
 9. <body>
10.  
11.     <div id="carousel">
12.         <!-- Contenuti del carosello verranno aggiunti qui -->
13.     </div>
14.  
15.     <script src="https://code.jquery.com/***.js"></script>
16.     <script src="script.js"></script>
17. </body>
18. </html>

Ora che abbiamo preparato l’ambiente, possiamo iniziare a implementare il nostro carosello. Creeremo un file JavaScript (`script.js`) per gestire il comportamento del carosello.

 

 1. // Assicuriamoci che il file HTML sia completamente caricato prima di eseguire il codice jQuery
 2. $(document).ready(function() {
 3.  
 4.     // Definiamo i nostri dati di esempio (è possibile sostituirli con i propri contenuti)
 5.     let carouselData = [
 6.         { image: 'img1.jpg', caption: 'Img 1' },
 7.         { image: 'img2.jpg', caption: 'Img 2' },
 8.         { image: 'img3.jpg', caption: 'Img 3' }
 9.     ];
10.  
11.     // Funzione per popolare il carosello con i dati
12.     function populateCarousel() {
13.         for (let i = 0; i < carouselData.length; i++) {
14.             $('#carousel').append('<div class="carousel-item"><img src="' + carouselData[i].image + '" alt="' + carouselData[i].caption + '"><p>' + carouselData[i].caption + '</p></div>');
15.         }
16.     }
17.  
18.     // Inizializziamo il carosello
19.     populateCarousel();
20.  
21.     // Funzione per gestire il cambio di immagine
22.     function changeImage() {
23.         let currentImage = $('.carousel-item:first');
24.         let nextImage = currentImage.next();
25.  
26.         currentImage.fadeOut('slow', function() {
27.             $(this).appendTo('#carousel');
28.             nextImage.fadeIn('slow');
29.         });
30.     }
31.  
32.     // Impostiamo l'intervallo per cambiare l'immagine ogni 3000 millisecondi (3 secondi)
33.     setInterval(changeImage, 3000);
34.  
35. });

Ora, definiamo uno stile di base per il nostro carosello nel file `style.css`.

 

 #carousel {
 2.     width: 60%;
 3.     margin: auto;
 4.     overflow: hidden;
 5. }
 6.  
 7. .carousel-item {
 8.     display: none;
 9. }
10.  
11. img {
12.     width: 100%;
13.     height: auto;
14. }
15.  
16. p {
17.     text-align: center;
18.     font-weight: bold;
19. }

Con queste semplici jQuery function, saremo in grado di implementare un carosello (o slider) funzionante utilizzando jQuery. Per renderlo più personale o adatto al sito web che stai realizzando, puoi personalizzare ulteriormente lo stile, la transizione delle immagini e aggiungere altre funzionalità in base alle tue esigenze. 

jQuery si dimostra ancora una volta una delle librerie più potenti e flessibili per semplificare lo sviluppo front-end e aggiungere un tocco personale alle tue pagine web, oltre che renderle moderne. Vuoi continua a sperimentare e approfondire le funzionalità offerte da jQuery per migliorare ulteriormente il tuo carosello o esplorare altre funzionalità messe a disposizione dalla libreria? Consultando la nostra guida jQuery in italiano

Articoli correlati

Il linguaggio HTML (Hypertext Markup Language) è uno dei più conosciuti e diffusi: lo si trova infatti praticamente in tutte le pagine web esistenti. È una scelta popolare tra i principianti che si…

Seguici su Facebook

Vuoi entrare nel mondo della programmazione?

Scopri di più sui nostri corsi!

Chiamaci al numero verde

Contattaci su WhatsApp

Contattaci senza impegno per informazioni sul corso

Pagamento rateale

Valore della rata: A PARTIRE DA 115 €/mese.

Esempio di finanziamento 

Importo finanziato: € 2440 in 24 rate da € 115 – TAN fisso 9,55% TAEG 12,57% – importo totale del credito € 2841.

Il costo totale del credito comprende: interessi calcolati al TAN indicato, oneri fiscali (imposta di bollo sul contratto 16,00 euro*) addebitati sulla prima rata, costo mensile di gestione pratica € 3,90, spesa di istruttoria € 0,00, spesa per invio rendicontazione periodica cartacea € 0,98 (o spesa per invio rendicontazione periodica cartacea € 0,00), imposta di bollo su rendicontazione periodica € 0,00. Modalità di rimborso obbligatoria: addebito diretto su c/c. La scadenza delle rate è determinata dal giorno della liquidazione del contratto; la data di scadenza delle rate è prevista il giorno 15 del mese. L’importo di ciascuna rata comprende una quota di capitale crescente e interessi decrescente secondo un piano di ammortamento “alla francese”. Offerta valida dal 01/01/2024 al 31/12/2024.

Messaggio pubblicitario con finalità promozionale. Per le informazioni precontrattuali richiedere sul punto vendita il documento “Informazioni europee di base sul credito ai consumatori” (SECCI) e copia del testo contrattuale. Salvo approvazione di Sella Personal Credit S.p.A. Aulab S.r.l. opera quale intermediario del credito NON in esclusiva.

*In fase di richiesta del finanziamento verrà proposta la facoltà di selezionare, in alternativa all’imposta di bollo sul contratto di 16,00 euro, l’imposta sostitutiva, pari allo 0,25% dell’importo finanziato.

Pagamento rateale

Valore della rata: A PARTIRE DA 210 €/mese.

Esempio di finanziamento  

Importo finanziato: € 4500 in 24 rate da € 210,03 – TAN fisso 9,68% TAEG 11,97% – importo totale del credito € 5146,55.

Il costo totale del credito comprende: interessi calcolati al TAN indicato, oneri fiscali (imposta di bollo sul contratto 16,00 euro*) addebitati sulla prima rata, costo mensile di gestione pratica € 3,90, spesa di istruttoria € 0,00, spesa per invio rendicontazione periodica cartacea € 0,98 (o spesa per invio rendicontazione periodica cartacea € 0,00), imposta di bollo su rendicontazione periodica € 0,00. Modalità di rimborso obbligatoria: addebito diretto su c/c. La scadenza delle rate è determinata dal giorno della liquidazione del contratto; la data di scadenza delle rate è prevista il giorno 15 del mese. L’importo di ciascuna rata comprende una quota di capitale crescente e interessi decrescente secondo un piano di ammortamento “alla francese”. Offerta valida dal 01/01/2024 al 31/12/2024.

Messaggio pubblicitario con finalità promozionale. Per le informazioni precontrattuali richiedere sul punto vendita il documento “Informazioni europee di base sul credito ai consumatori” (SECCI) e copia del testo contrattuale. Salvo approvazione di Sella Personal Credit S.p.A. Aulab S.r.l. opera quale intermediario del credito NON in esclusiva.

* In fase di richiesta del finanziamento verrà proposta la facoltà di selezionare, in alternativa all’imposta di bollo sul contratto di 16,00 euro, l’imposta sostitutiva, pari allo 0,25% dell’importo finanziato.

Contattaci senza impegno per informazioni sul corso

Scopriamo insieme se i nostri corsi fanno per te. Compila il form e aspetta la chiamata di uno dei nostri consulenti.