Slider Responsive Full Screen con testi animati utilizzando Flex Slider

By Andrea Marchetti - 17 Giu , 2013

Slider Responsive Full Screen con testi animati utilizzando Flex Slider
Slider Full Screen

Oggi vedremo come costruire uno Slider di immagini Fullscreen con testi animati utilizzando l’affidabile FlexSlider 2. Imposteremo prima il Css in modo che le slide occupino tutto lo spazio disponibile, poi animeremo i testi con jquery e infine renderemo il tutto Responsive grazie alle media queries.

1) Inzializziamo Flexslider

Scarichiamo lo slider al seguente indirizzo, scompattiamo il file e copiamo i file flexslider.css e jquery.flexslider.js nella cartella del nostro progetto.

In questa cartella creiamo il file index.html dentro questo pagina richiamiamo gli stili necessari.

<link rel="stylesheet" href="css/flexslider.css" type="text/css" media="screen" />
<link rel="stylesheet" href="css/slider.css" type="text/css" media="screen" />

Il primo serve al funzionamento di default dello slider, il secondo slider.css è il file nel quale scriveremo le modifiche per rendere lo slider Fullscreen.

A fine pagina richimiamo i file javascript di jquery e Flexslider:

<!-- jQuery -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/libs/jquery-1.7.min.js">\x3C/script>')</script>
<!-- FlexSlider -->
<script defer src="js/jquery.flexslider.js"></script>
<script type="text/javascript">
$(window).load(function(){
$('.flexslider').flexslider({
animation: "fade"
});
});
</script>

2) Impostiamo l’HTML base

Lo slider per funzionare correttamente e mostrare i testi “caption” sopra le immagini ha bisogno di una struttura html di questo tipo:

<div class="flexslider">
<ul class="slides">
<li>
<img src="my_img.jpg"/>
<div class="flex-caption">
...
</div>
</li>
<li>
<img src="my_img.jpg"/>
<div class="flex-caption">
...
</div>
</li>
</ul>
</div>

3) Definaimo il CSS

Ora nel file slider.css scriviamo il css che andrà a sovrascrivere il css di default di FlexSlider rendendo ogni slide grande come l’intera pagina.

body, html	{margin:0; padding:0;width:100%;height:100%!important; overflow-x: hidden;}
.flexslider, .flex-viewport	{width:100%;height:100%!important; margin:0;padding:0;}
.flexslider .slides		{height:100%!important;}
.flexslider .slides li 	{width:100%;height:100%!important; margin:0;padding:0;}

Con height: 100%Important ogni slide è forzata a occupare tutta l’atezza visibile disponibile, se però inseriamo un immagine in una delle slide vediamo che questa occupa tutta la larghezza della pagina ma non tutta l’altezza.

4) Impostiamo le immagini Fullscreen

Per rendere le immagini alte come l’altezza della pagina utilizziamo un piccolo trick css. Come prima cosa impostiamo l’immagine come background della slide li

<div class="flexslider">
<ul class="slides">
<li style="background: url(img/1.jpg) center">
<div class="flex-caption">
<h1>Amsterdam, Netherlands</h1>
<p>The capital and most populous city of the Netherlands</p>
</div>
</li> 
<li style="background: url(img/2.jpg) center">
<div class="flex-caption">
<h1>Noord, Netherlands</h1>
<p>The largest metropolitan area</p>
</div>
</li>
</ul>
</div>

Poi utilizzando la propietà Css3 background-size: impostata come cover rendiamo le immagini in background alte come le slide li impostate con height :100%

.flexslider .slides li 	{width:100%;height:100%!important; margin:0;padding:0;
-webkit-background-size: cover!important;
-moz-background-size: cover!important;
-o-background-size: cover!important;
background-size: cover!important;
}

5) Animiamo le caption

Per animare i testi usiamo due funzioni javascript che eseguiremo con i callback before e after di Felxslider. Before viene eseguito prima del cambio di slide, after viene eseguito dopo l’animazione della slide in ingresso.

$(window).load(function(){
$('.flexslider').flexslider({
animation: "fade",
start: function(){},            //Callback: function(slider) - Fires when the slider loads the first slide
before: function(){captionMoveOut();},           //Callback: function(slider) - Fires asynchronously with each slider animation
after: function(){captionMoveIn();},            //Callback: function(slider) - Fires after each slider animation completes
end: function(){},              //Callback: function(slider) - Fires when the slider reaches the last slide (asynchronous)
added: function(){},            //{NEW} Callback: function(slider) - Fires after a slide is added
removed: function(){}
});
$('.flex-caption').hide();
$('.flex-caption').fadeIn(2000);
});
function captionMoveIn() {
$('.flex-caption')
.animate({top: "35%"},0)
.fadeIn(2000)
;};
function captionMoveOut() {
$('.flex-caption')
.animate({top: "-40%"},700)
.fadeOut("normal")
;};

Dopo aver inizializzato lo slider nascondiamo i testi “caption” con il metodo hide(); di jquery.

La funzione captionMoveIn(); (legata al callback after) mostra il testo con un effetto fade in di 2000 millisecondi dopo l’ingresso della slide.

La funzione captionMoveOut(); (Legata al callback before) effettua un fade out del testo e sposta la caption verso l’alto prima del cambio slide.

6) Rendiamo il tutto Responsive

Ora lo slider ridimensiona correttamente le immagini ma non le caption che rimangono troppo grandi su Smartphone e Tablet. Con due media queries rendiamo la grandezza delle caption ottimale anche su device mobili.

@media (min-width: 768px) and (max-width: 980px) {
.flex-caption h1	{font-size: 55px;}
.flex-caption p		{font-size: 13px;}
.flex-control-nav 	{bottom: 25%; }
}
@media (max-width: 767px) {
.flex-caption h1	{font-size: 35px;}
.flex-caption p		{font-size: 10px;}
.flex-control-nav 	{bottom: 15%; }	
}

Cosi facendo abbiamo ottenuto uno Slider Fullscreen con testi animati. Lo Slider con qualche piccolo aggiustamento sulle immagini può essere utilizzato come un normale Slider Responsive (senza immagini full screen) qui di seguito il link per la demo e il download.

Stay Tuned!

demo

Se ti và ringraziami con un Like a MarchettiDesign.net.

Oppure offrimi un caffè :-)
download

50 Commenti

  1. Cristian ha detto:

    GRAZIE!!!!

  2. Fabio ha detto:

    Salve, ottimo tutorial! una domanda, io vorrei inserire i social in alto a destra sopra le immagini dello slider. come posso fare?

  3. daniela ha detto:

    fantastico il tuo sito! utilissimo e molto chiaro. bravo bravo bis!

  4. Fabio ha detto:

    Vorrei utilizzare questa fantastica guida per un sito WP ma vorrei sapere dove installare la cartella DEMO!

    grazie e ottimo sito!

  5. simone ha detto:

    c’è modo di fargli pescare le immagini da una cartella invece di doverle inserire manualmente nel codice?
    grazie

  6. Francesco ha detto:

    Ciao Andrea,

    grazie per questa e le altre guide, molto ben fatte.

    Ho notato che nella demo, a fondo pagina rimane un margine bianco alto circa 10px, che fa comparire la scrollbar verticale. Ho provato a dare un’occhiata con firebug ma non riesco a capire da dove possa provenire. Hai idee?

    • Andrea Marchetti ha detto:

      Ciao Francesco,
      il modo più veloce per farla sparire è disattivare lo scroll verticale con overflow-y: hidden

  7. simone ha detto:

    andrea potresti vedere la mia domanda sopra?grazie 😉

  8. franz ha detto:

    ciao Andrea e complimenti,
    volevo chiederti,: non capisco come avviene il posizionamento del h1 e del caption a centro pagina rispetto al plugin originale!
    Avviene utilizzando il js?
    Grazie

  9. franz ha detto:

    ok, cosi lo centro,
    ma non vedo la regola css dell’inserimento a mezza pagina,
    nel flexslider originale il caption viene posizionato sotto.
    io sostanzialmente voglio prendere l’originale e mettere come hai fatto te, titolo e descrizione al centro dell’immagine.

  10. Dario ha detto:

    Ciao Andrea, tutorial molto utile, però volevo chiederti un consiglio. Siccome ho creato lo slide per dei prodotti ed ho un menu esterno per essi, come posso linkare ogni singolo prodotto del menu al relativo frame dello slide ( ovviamente mantenendo l’animazione ). ?

    • Andrea Marchetti ha detto:

      Ciao Dario,
      devi utilizzare la flex control nav che ora è visualizzata a forma di “pallini”, devi sostiuire nell html/css i pallini con le voci del menu..

  11. Fabrizio ha detto:

    Ciao, c’è un modo per mostrare nella parte bassa dell’immagine i pulsantini del carusel?
    In modo da far capire ad esempio che si tratta dell’immagine uno di due e così via..
    Grazie in anticipo per l’aiuto.

  12. Fabrizio ha detto:

    Ciao, grazie per la risposta, da mobile non me ne ero accorto.
    Sono riuscito ad attaccarli in fondo alla pagina facendo .flex-control-nav {bottom: 0%; }

    Adesso mi piacerebbe attaccare in fondo alla pagina, subito sopra i pallini, il div flex-caption, ovvero fare in modo che le scritte che scorrono stiano in fondo alla pagina ma subito sopra i pallini.
    Ho provato con bottom:0% ma mentre per la prima schermata funziona, quando la slide va avanti il nuovo div entrante diventa molto più grosso

    Grazie mille ancora per il tuo aiuto!

  13. Fabrizio ha detto:

    Scusami, ed infine, c’è un modo per disabilitare lo scorrimento automatico delle immagini e far si che scorrano solo tramite swipe?
    Grazie!

  14. Fabrizio ha detto:

    Ciao, da Mobile non riesco a vedere i pallini.
    Mi dai una mano per piacere?

  15. Fabrizio ha detto:

    Scusami ancora, potresti rispondere alla domanda sul problema della visualizzazione dei pallini da mobile?

    • Andrea Marchetti ha detto:

      Ciao Fabrizio, scusami per la risposta in ritardo,
      aggingi z-index: 9999 alla classe .flex-control-nav 😉

  16. Fabio ha detto:

    ciao Andrea,
    ottima demo!

    Vorrei fermare lo slider quando finiscono le immagini, senza farle ripartire e volevo sapere se è possibile aggiungere un’ immagine sullo slider, con il link a facebook.

  17. Fabrizio ha detto:

    Ciao Andrea,
    sai dirmi come associare alla pressione di un tasto l’azione di slide?
    Grazie mille, questo articolo è veramente molto molto interessante!

    • Andrea Marchetti ha detto:

      Ciao Fabrizio,
      elimina il codice .flex-direction-nav {display:none;} nel css e ti appariranno i tasti per cambiare slide 😉

  18. Domenico ha detto:

    Ciao ottima guida, vorrei inserirlo in una pagina ma non capisco come ridimensionarlo.Puoi darmi una dritta?
    ciaooo e grazie!

  19. Dario ha detto:

    inoltre potrei sapere se è consigliato usare dreamweaver per creare una pagina web?? voi vosa usate??

    • Andrea Marchetti ha detto:

      Ciao Dario,
      un qualsiasi editor che ha l’evidenziazzione del codice e l’autocompletamento dei tag va bene,
      dreamweaver ha entrambe queste caratteristiche..

  20. joel ha detto:

    Ciao andrea …
    A quanto pare finalmente ho trovato il plugin che stavo cercando di applicare per i miei progetti web … io scaricarlo.
    Una query può sapere come posizionare i pulsanti Avanti e Indietro qui ti mando il link se si può fare farlo

    http://wrapbootstrap.com/preview/WB08M83J0

  21. Silvia ha detto:

    Ciao Andrea,

    ti ringrazio per il tutorial, era proprio quello che cercavo!!!

    Siccome non volevo che le slide prendessero tutto lo spazio in altezza, ho fatto come hai consigliato a Domenico e cioè di inserirlo in un div contenitore e ridimensionarlo, e infatti ha funzionato ma sui vari browser lo vedo in modo diverso, in particolare su Chrome mi taglia proprio l’immagine!!! Per vederla tutta devo aumentare parecchio l’altezza e questo influisce su Firefox dove diventa troppo grande. Mi puoi aiutare per favore?

    Ciao e grazie

  22. igor ha detto:

    Ciao Andrea,

    ti scrivo perchè vorrei utilizzare il tuo tutorial per impostare in homepage una flexislider full responsive. Ne ho provate svariate ma riscontro sempre il solito problema: con Firefox mi compare sempre una doppia barra di scorrimento laterale. Con gli altri Browser sembra andare quindi mi chiedevo: non c’è un modo per ovviare a questo problema?

    Ti ringrazio infinitamente

    Igor_

    • Andrea Marchetti ha detto:

      Ciao Igor,
      puoi bloccare la barra orizzontale con:

      html,
      body {
      margin: 0;
      padding:0;
      overflow-x:hidden;
      }

  23. Giuseppe ha detto:

    Per cortesia, coem faccio a visualizzare correttamente immagini verticali? Con le orizzontali non da problemi, ma con le verticali, fa uno strech su tutta la foto a mò di zoom…penso si debba modificare il css, ma dove? Grazie…

    • Andrea Marchetti ha detto:

      Ciao Giuseppe,
      se leggi l’articolo vedrai che le immagini vengono ridimensionate appositamente orizzontalmente (tramite css3) per occupare tutto lo schermo,
      ti consiglio di tagliare le tue immagini o di non usare immagini verticali..

  24. Giulio ha detto:

    Ciao Andrea,
    ho un problema nel settare questo slideshow nella mia pagina. Nonostante l’aggiunta di “height:100%!important;” e il “background-size:cover!important;”… lo slideshow non si allarga su tutta la sua altezza. Non riesco a capire dove sta l’errore!!
    Premetto che ho anche scaricato il file e provato ad incollare pari pari la forma del css e niente da fare!!
    L’unica possibilità che ho di vedere il background ce l’ho settando come al solito un’altezza fissa… ma chiaramente quella, restringendo la finestra, resta la stessa…

  25. Francesco ha detto:

    Ciao Andrea, grazie per il tuo tutorial. Che ne dici di implementare questa libreria per superare il limite del CSS3 del background size per i browser che non lo supportano -> https://github.com/louisremi/background-size-polyfill

    Aggiornare il post potrebbe essere una buona soluzione 🙂

    Fammi sapere 🙂

  26. Filippo ha detto:

    Ciao Andrea, è possibile inserire un pulsante in basso alla schermata che faccia salire il fullscreen e scopra dei contenuti che si trovano più in basso?
    Scusa l’intreccio di parole ma non so come spiegartelo.
    Vorrei fare n qualcosa tipo questo: http://themeforest.net/item/ether-one-page-multipurpose-joomla-template/full_screen_preview/9161752

    A dire il vero ho provato a inserire un pulsante in basso alla viewport, ma evidentemente il codice Js va in conflitto con quello di Flexslider…

    Grazie infinite per il tuo aiuto!

    Filippo

    • Andrea Marchetti ha detto:

      Ciao Filippo,
      si può fare devi, inserire lo slider in un div contenitore e poi muovere il contenitore con jquery al click di un pulsante..

  27. rocco ha detto:

    Ciao Andrea, vorrei sapere se è possibile inserire un video all’interno dello slideshow

  28. beniamino ha detto:

    vorrei temporizzare ogni songola slide del tipo slide 1 3 secondi , slide 2 5 secondi e’ possibile?

  29. Aurora ha detto:

    Ciao,
    grazie per la condivisione.
    Ho dei problemi con alcuni script, ad esempio, in un sito dove ho inserito la flexslider, non ho più l’effetto del fancybox. In un altro sito dove ho inserito lo script isotope, ho lo stesso problema, cioè fancybox non mi funziona più. Dove sbaglio? C’è qualche incopatibilità, conflitti? Come posso risolvere?
    Grazie

  30. bruno ha detto:

    ciao Andrea, volevo chiederti se mi puoi aiutare.
    Vorrei una slideshow fullscreen solo in larghezza, devo modificare ampiezza template? puoi darmi qualche indicazione?
    grazie.

  31. Luigi ha detto:

    Ciao
    complimenti per il tutorial avrei bisogno di un aiuto ,anche io uso Flexslider ma non riesco ad integrarlo con le featured image post dei post come posso fare?
    es:
    dove il background delle siano le
    GRAZIE!

  32. haki ha detto:

    Ciao,
    nel mio slide quando diminuisco la finestra del browser o nel smartfon le immagine non viene centrata o meglio dire si vede solo la parte sinistra del immagine. Come posso fare che si vede tutta immagine? Come posso risolvere?
    Grazie

  33. Luca ha detto:

    Ciao
    prima di tutto complimenti per il sito e la guida,
    sto lavorando su un sito dove scorrono delle immagini
    volevo chiederti come posso far scorrere le immagini utilizzando le frecce destra e sinistra del pc e come faccio ad inserire un testo sulle immagini che si attiva quando ti posizioni sull’immagine con il mouse.
    Grazie

  34. Gianmarco ha detto:

    Ciao Andrea,
    meravigliosa guida!
    E’ tutto chiarissimo e non ho avuto problemi con l’inserimento e la regolazione dello slide, tranne che per un piccolo fondamentale particolare… avendo un header in position:fixed; contenente logo e menù, quando vado a scrollare la pagina lo slide sovrasta l’header.
    Dove posso trovare la regola css per risolvere questo problema?
    Grazie in anticipo!

Lascia un commento

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