L'ultima tendenza nel campo del web design è quella di creare siti web il più possibile immediati e provvisti di pochi ma efficaci elementi decorativi.
In questa prospettiva del tutto moderna ed attuale, uno degli elementi di design più comunemente adoperati è quello dello slider.
Lo slider è un elemento di design che si occupa di riunire un insieme di oggetti, in genere un insieme di immagini, in modo che questi possano essere visti in loop da un visitatore web. Lo slider, per tale motivo, viene quasi sempre posto in primo piano nel sito web, in modo che un utente possa vederlo non appena entrato. L'aggiunta di una presentazione nella homepage può essere considerata come una delle migliorie disponibili per perfezionare il design e il contenuto informativo del proprio sito. Basti pensare ad un e-commerce, in cui uno slider potrebbe mostrare ai probabili clienti le ultime offerte sui prodotti in sconto, non appena questi entrati nel sito.
È quindi consigliabile che lo slider racchiuda e racconti in breve, mediante immagini, contenuti interattivi o frasi di impatto, i punti di forza del sito web.
Come già detto, questo può raccogliere qualsiasi tipologia di elemento e il suo contenuto dipenderà dal suo sviluppatore che potrà sbizzarrirsi nel suo sviluppo per rendere più accattivante e unico il sito web.
HTML e CSS invece che JavaScript?
Esistono già numerose librerie JavaScript capaci di offrire slider preconfezionati. Alcune di queste soluzioni, però, se non correttamente sviluppate e mantenute aggiornate nel tempo, potrebbero arrecare più danno che altro. Spesso, infatti, siti dotati di questi slider risultano essere molto lenti e pesanti. Senza considerare l'ipotesi (per la verità relativamente remota) che alcuni utenti potrebbero decidere di disattivare l'interprete JavaScript del proprio browser web per ragioni di sicurezza, non rendendone la sua visualizzazione possibile.
Una soluzione a tutto questo ci viene offerta dall'uso di HTML e del CSS per la creazione del nostro slider: soluzione leggera e pienamente compatibile con tutti i browser web.
Pagina HTML
Prima di tutto dobbiamo creare un file iindex.html in cui andremo a inserire il nostro slider. In questo file andremo a inserire il seguente codice:
<!doctype html>
<html>
<head>
<title>Slider HTML.it</title>
<link href="style.css" type="text/css" rel="stylesheet">
</head>
<body>
</body>
</html>Con questo codice abbiamo caricato un file di stile esterno, chiamato style.css, in cui andremo a inserire tutte le regole di visualizzazione CSS del nostro futuro slider.
Prima, però, di cominciare a scrivere tale file CSS, inseriamo nel body della pagina HTML i seguenti tag:
<body>
<div class="slider-container">
<span id="slider-image-1"></span>
<span id="slider-image-2"></span>
<span id="slider-image-3"></span>
<div class="image-container">
<img src="1.jpg" class="slider-image" />
<img src="2.jpg" class="slider-image" />
<img src="3.jpg" class="slider-image" />
</div>
<div class="button-container">
<a href="#slider-image-1" class="slider-change"></a>
<a href="#slider-image-2" class="slider-change"></a>
<a href="#slider-image-3" class="slider-change"></a>
</div>
</div>
</body>Con questo codice abbiamo gettato le fondamenta della struttura del nostro slider che, come è possibile osservare, è essenzialmente racchiusa in tre div dotati delle seguenti classi CSS: slider-container, image-container e button-container.
I nomi delle classi sono di per sè esaustivi, ma l'image-container ed il button-container si occuperanno di "contenere" le immagini dello slider e i pulsantini che ne determineranno, al click, il cambiamento di contenuto.
Approssimativamente, questo è ciò che stiamo realizzando:
CSS
Adesso occupiamoci di definire le regole CSS che ci permetteranno di "animare" lo slider già creato lato HTML. Creiamo quindi un nuovo file style.css, in cui definiamo le seguenti classi:
.slider-container
{
width: 800px;
height: 400px;
background-color: yellow;
margin-left: auto;
margin-right: auto;
margin-top: 0px;
text-align: center;
overflow: hidden;
}Questa classe si occupa di definire il contenitore dello slider, che, come si vede, avrà dimensioni pari a 800x400px. Viene da sè che le immagini che saranno inserite al suo interno, dovendo queste coprire l'intera dimensione dello slider-container, saranno delle sue stesse dimensioni.
.image-container
{
width: 2400px;
background-color: red;
height: 400px;
clear: both;
position: relative;
-webkit-transition: left 2s;
-moz-transition: left 2s;
-o-transition: left 2s;
transition: left 2s;
}La classe image-container avrà una width pari a 2400px, perchè nel nostro slider, come visibile già dal codice HTML definito sopra, andremo ad inserire 3 immagini: abbiamo tre tag span con all'interno: slider-image-1, slider-image-2 e slider-image-3.
Dovendo avere ogni immagine una width di 800px, per le dimensioni definite dal nostro slider-container, 800px x 3 = 2400px.
La strategia implementativa che adottiamo per questo slider sarà quella di affiancare le tre immagini all'interno dell'image-container e di mostrarne solo una per volta, muovendone le loro coordinate all'interno dell'image-container. In questo modo, due delle tre immagini saranno sempre non visibili all'utente.
#slider-image-1:target ~ .image-container
{
left: 0px;
}
#slider-image-2:target ~ .image-container
{
left: -800px;
}
#slider-image-3:target ~ .image-container
{
left: -1600px;
}Queste tre regole riguardano gli id slider-image-1, slider-image-2 e slider-image-3.
La pseudo-classe :target serve per creare elementi interattivi senza il coinvolgimento di JavaScript. Il :target viene quindi usato per creare degli anchor dinamici che puntano a determinati elementi presenti nel codice HTML.
Il sibling selector ~ separa due selettori e considera il secondo elemento della regola solo se questo si trova nel codice HTML dopo il primo elemento (non necessariamente subito dopo). Entrambi gli elementi, però, devono avere lo stesso nodo genitore.
Per capire bene il suo funzionamento, ricordiamo che all'interno del nostro button-container, nella pagina HTML, avevamo definito una serie di link come questi:
<div class="button-container">
<a href="#slider-image-1" class="slider-change"></a>
<a href="#slider-image-2" class="slider-change"></a>
<a href="#slider-image-3" class="slider-change"></a>
</div>Al click di uno dei precedenti elementi (che in pratica sarebbero i nostri pulsanti circolari visibili nell'immagine sopra), verrà cercato un id tra slider-image-1, slider-image-2 e slider-image-3 (in base al pulsante premuto), ed applicato il relativo codice CSS appena presentato.
Quindi, queste regole CSS è modificano la proprietà left dell'image-container che si trova subito dopo uno dei tre span, in modo da spostarne il contenuto e visualizzare una determinata immagine delle tre disponibili.
.button-container
{
position: relative;
top: -20px;
}
.slider-change
{
display: inline-block;
height: 10px;
width: 10px;
border-radius: 5px;
background-color: brown;
}Infine, con queste ultime due regole CSS creiamo il design dei pulsanti e impostiamo la posizione del button-container.
Il risultato finale sarà simile al seguente:
Cliccando sui pulsanti in basso verranno mostrate le diverse immagini.
Le immagini andranno inserite mediante il loro path, all'interno dell'image-container della pagina HTML.
<div class="image-container">
<img src="1.jpg" class="slider-image" />
<img src="2.jpg" class="slider-image" />
<img src="3.jpg" class="slider-image" />
</div>Conclusioni
In questo tutorial abbiamo mostrato quanto sia semplice creare uno slider con le tecnologie HTML e CSS. Questo, realizzato senza alcun utilizzo di JavaScript risulta essere un'ottima soluzione sia in termini di prestazioni che di usabilità.
