Creare un Horizontal Carousel Slider Responsive con Jquery
By Andrea Marchetti
@marchetti_design
Oggi vediamo come costruitre uno slider di contenuti orizzontali responsive. Questa soluzione è ideale quando si vogliono mostrare loghi o immagini in una pagina ma lo spazio non è sufficente. Quindi si fanno scorrere le immagini, nel nostro caso orizzontalmente.
Il nostro slider sarà responsive. Su schermi normali le immagini visualizzate (senza lo scorrimento) saranno sei mentre su schermi sotto i 980px (Tablet e Smartphone) saranno quattro. Per realizzare il tutto utilizzeremo jquery e le media queries.
Html
Come prima cosa creiamo il codice html necessario, un div container con all’interno una lista ul
<div id="container">
<ul id="slider">
<li id="slide1"><a href="#"> </a></li>
<li id="slide2"><a href="#"> </a></li>
<li id="slide3"><a href="#"> </a></li>
[…]</ul>
</div>
Nell’header della nostra pagina impostiamo il viewport per la versione responsive
<!– Mobile viewport optimized: j.mp/bplateviewport –>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
CSS
Successivamnte definiamo il foglio di stile.
body,html{margin:0; padding:20px; font-family: open sans;background: #eee;}h2{margin:0;padding:0;padding:20px;font-size:18px;height:50px; font-family: oxygen;font-weight:200;color:#fff; }
#container{width:100%;margin:0 auto;overflow: hidden;}
#container ul {
overflow: hidden;
margin:0px;
padding:0px;
width:300%;
}#container ul li {
width:5.56%;
list-style:none;float:left;
margin-right: 0%;
}#container ul li img{width:100%; height:auto;}
Il contenitore sarà largo l’intera larghezza della pagina width: 100%, la lista ul sarà invece molto più larga width: 300% per mantenere gli elementi su una riga e non farli andare a capo.
Per ottenere i sei elementi visualizzati di default dobbiamo impostare la larghezza degli elementi li a width: 5.56%
Variando questa percentuale possiamo cambiare il numero di elementi visualizzati, ora animiamo il tutto con jquery.
Jquery
Richiamiamo jquery nella pagina
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
Sotto inseriamo il codice che permetterà allo slider di scorrere e di stoppare l’animazione allo stato hover del mouse
<script>
$(function(){var ticker = function(){
ticker_timeout = setTimeout(function(){
$(‘#slider li:first’).animate( {marginLeft: ‘-25%’}, 450, function(){
$(this).detach().appendTo(‘ul#slider’).attr(‘style’, ”);
});
ticker();
}, 2500);
};$(‘#slider’).hover(function() {
$(‘#slider’).stop();
clearTimeout(ticker_timeout);
}, function() {
ticker();
});ticker();
});
</script>
Questo codice applica al primo elemento della lista un margine sinistro negativo per far scorrere gli elementi fuori dallo schermo. Il contenitore ha come propietà overflow: hidden, quindi non si vedono gli elementi spostati al di fuori della sua area. L’elemento che viene spostato con il margine negativo esce dallo schermo e viene riposizionato alla fine della lista con stile resettato grazie a attr(‘style’, ”).
2500 è il tempo tra uno slide e l’altro, all’hover dello slider viene fermata l’animazione con il metodo stop(); di jquery e resettato il tempo tra gli scorrimenti.
Media Queries
Avendo utilizzato valori percentuali lo slider già si adatta alla larghezza della pagina. Se rimpiccioliamo molto la finestra (simulando lo schermo di uno smartphone) notiamo che sei elementi sono troppi da mostrare su una sola riga. Reimpostiamo la larghezza degli elementi li con le media queries.
@media (max-width: 980px) {body,html{margin:0; padding:10px;}
h2{font-size:14px;padding:10px;height:40px;}
#container ul li { width:8.35%;}
}
La percentuale 8.35% fa si che vengano visualizzati sotto i 980px di larghezza quattro elementi su una riga. Reimpostiamo anche la grandezza dei font e dello spazio attorno lo slider.
Lo slider è stato testato IOS e Android. Qui di seguito il link per la demo e il download.
Stay Tuned!
Potrebbero interessarti:
