Slider e menù responsive: ecco due elementi da avere nel vostro sito (Parte 2: Lo slider)

Eccoci arrivati alla seconda e ultima parte della guida su due elementi molto importanti che compongono una pagina web, ovvero un menù e uno slider responsive.

Oggi andremo a vedere come integrare uno slider (per la precisione, Flexslider) nel progetto della nostra landing page.

Iniziamo con l’eseguire il download dei componenti necessari, che possiamo scaricare da quest’indirizzo.

Spostiamo i file dentro la cartella del nostro sito, e mettiamo il file javascript appena scaricato dentro una cartella chiamata js, mentre il file css lo andremo a posizionare dentro la cartella css (previa creazione della stessa, ovviamente). Infine, in una cartella “img”, mettiamo le due immagini dello slider,  che nel nostro esempio avranno come nome “1.jpg” e “2.jpg”.

Andiamo ad aprire il nostro foglio html, e dentro i tag head inseriamo le seguenti diciture:

<link href="css/flexslider.css" rel="stylesheet" />
<link href='https://fonts.googleapis.com/css?family=Lato' rel='stylesheet' type='text/css'>
<script src="js/jquery.flexslider.js"></script>

Bene, ora siamo davvero pronti per andare a costruire lo slider vero e proprio. Iniziamo attribuendo all’html e al body alcuni attributi, ovvero:

html, body {
 margin: 0;
 height: 100%;
 width: 100%:
}

Scriviamo ciò per assicurarci che lo slider occupi l’intera area dello schermo. Fatto questo, andiamo a definire il codice HTML dello slider, che sarà semplicemente:

<div class="flexslider">
   <ul class="slides">
   
	<li style="background: url(img/img1.jpg)">
	 <div class="flex-caption">
	  <h1 class="big">New York</h1>
	  <p class="big">The Big Apple at night</p>
	 </div>
	</li> 
    
    <li style="background: url(img/img2.jpg)">
	 <div class="flex-caption">
	  <h1 class="big">Rome</h1>
	  <p class="big">The Colosseum</p>
	 </div>
	</li>
	  	    	
    </ul>
   </div>

Il div di classe .flexslider fungerà da contenitore per lo slider, mentre l’ul slides avrà lo scopo di contenere e di far scorrere le slide, rappresentate dagli elementi <li>. Lo so, lo stile dei <li> è obtrusive (ovvero implementato direttamente nell’html tramite l’attributo style), ma è l’unica soluzione per far sì che le immagini si adattino alla risoluzione dello schermo, e a breve vedremo come.

Infine, il div di classe .flex-caption servirà, come già dice il nome, a contenere la caption, ovvero gli elementi testuali interni allo slider.

Un po’ di stile

Andiamo a definire la struttura dello slider nel seguente modo:

 

.flexslider {
    margin: 0 !important;
    height: 100% !important;
    width: 100% !important;
    box-shadow: none !important;
    border: 0 !important;
    border-radius: 0 !important;
}

.flex-viewport {
    width: 100%;
    height: 100% !important;
    margin: 0;
    padding:0;
}

h1.big {
    font-size: 100px;
    margin-bottom: -20px;
}

p.big {
    font-size: 40px;
}

p {
    text-align: center;
    font-family: Lato;
    font-size: 20px;
    color: #FFF;
    font-weight: 700;
}

.flex-caption {
    padding-top: 50vh;
    margin-top: -100px;
}

.flex-direction-nav {
    display: none;
}

.flex-control-nav {
    display: none;
}

.slides {
    height: 100% !important;
}

.slides li {
    height: 100% !important;
    background-size: cover;
    background-position: center;
}


/* Start media queries */

@media screen and (min-width: 769px) and (max-width: 1023px) {
 
 h1.big {
    font-size: 80px;
 }

 p.big {
    font-size: 30px;
 }
 
}

@media screen and (max-width: 768px) {
 
 h1.big {
    font-size: 60px;
 }

 p.big {
    font-size: 20px;
 }
 
}

Andiamo in ordine. Innanzitutto abbiamo impostato lo slider e il suo viewport con altezza 100%, al fine di garantire il pieno riempimento della pagina. Successivamente, abbiamo impostato alcuni attributi secondari con il parametro !important, al fine di sovrascriverli a quelli del file “flexslider.css”.

Ciò che viene dopo, fatta esclusione per .slides e .slides li (che contengono attributi molto importanti per la corretta visualizzazione dello slider, come ad esempio height: 100% o background-size: cover), non è di grande importanza, infatti ci sono solo dichiarazioni puramente stilistiche da assegnare agli elementi contenuti in .flex-caption. A dir la verità, una cosa abbastanza importante ci sarebbe: in questo tutorial ho volutamente nascosto gli elementi .flex-direction-nav e .flex-control-nav (ovvero la navigazione tra le slide), al fine di non rendere troppo complessa, soprattutto per i meno esperti, questa guida.

Chiusa questa parentesi, lo stesso discorso che abbiamo fatto per lo stile in generale vale anche per le media queries, che hanno però lo scopo di adattare la caption alle diverse risoluzioni.

Un po’ di jQuery

È giunta finalmente l’ora di animare il tutto grazie a qualche riga di codice jQuery, riportato proprio qui sotto:

$(document).ready(function(){   

      $('.flexslider').flexslider({
        animation: "slide",            
	  before: function(){Out();},
	  after: function(){In();}
      });
    
    function In() {
		$('.flex-caption').fadeIn(200);
		};
	
	
	function Out() {
		$('.flex-caption').fadeOut(200);
		};

	
	   
});

Come al solito, il codice è davvero basilare. L’oggetto .flexslider deriva dal plugin omonimo, e permette di attribuire diverse proprietà allo slider. Quelle che abbiamo impostato noi sono l’animazione, ovvero “slide”, e il comportamento della caption prima e dopo il cambio di slide, nel nostro caso un semplice fadeIn dopo l’animazione e fadeOut prima della stessa.

Ecco come apparirà il nostro slider una volta pronto:

Senza titolo-3

Conclusioni

Anche per oggi l’articolo è concluso, potrete scaricare tutto il materiale da questo link e visionare il risultato in questa pagina.

Permettetemi solo una piccola nota: l’articolo è volutamente semplice, in modo da dare la possibilità, come ho detto sopra, di comprendere tutti i passaggi anche ai meno esperti.

Invito chiunque volesse approfondire le proprietà di flexslider, o magari mostrare e rendere responsive anche i controlli di animazione, ad esporre i propri dubbi e problemi nei commenti, oltre che a visitare la documentazione ufficiale di flexslider all’indirizzo https://github.com/woothemes/FlexSlider.

Tag:

L'autore

Conosco in modo approfondito HTML5, CSS3, Wordpress e mi sto specializzando sul framework jQuery e sui linguaggi server side PHP e MySQL. Adesso mi credi un robot, non è vero? Non ti preoccupare, in realtà nel tempo libero mi diletto in qualche scatto, ed ovviamente non disdegno mai una bella pizza con gli amici!

Altri articoli scritti da

Articoli correlati

Altri articoli

Ecco qualche altro articolo che potresti trovare interessante:

2 commenti

Trackback e pingback

Non ci sono trackback e pingback disponibili per questo articolo