Creare uno Slider Responsive e Touch Ready con Slick Slider
By Andrea Marchetti
@marchetti_design
Oggi vediamo come creare uno Slider Responsive con supporto Touch grazie a Slick. Questo plug-in si presenta come lo slider definitvo e se non lo è ci va veramente vicino.
Slick consente di creare un gran numero di strutture diverse: carousel, slider centrati o con thumbnail di navigazione. Tutti gli slider hanno supporto Touch, per vedere gli esempi vi rimando alla pagina demo:
http://kenwheeler.github.io/slick/
Nel nostro caso realizzeremo uno slider con thumbnail di navigazione responsive combinando due esempi della pagina demo.
Come prima cosa richiamiamo nell’header lo stile
<link rel="stylesheet" href="css/slick.css"/>
A fine pagina gli altri file necessari al funzionamento.
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script><script type="text/javascript" src="js/slick.min.js"></script>
Html
Ora impostiamo il codice html necessario, avremo uno slider per le immagini grandi e un altro per la navigazione con le thumbnail.
<div class="container-slider"><div class="slider slider-for">
<div><img src="3.jpg" alt="Berlin Wall"/><h3>Berlin Wall</h3></div>
<div><img src="1.jpg" alt="Brandenburg Port"/><h3>Brandenburg Port</h3></div>
<div><img src="2.jpg" alt="Blue Street Art"/><h3>Blue Street Art</h3></div><div><img src="4.jpg" alt="Ramones Museum"/><h3>Ramones Museum</h3></div>
<div><img src="5.jpg" alt="Kreuzberg"/><h3>Kreuzberg</h3></div>
</div><div class="slider slider-nav">
<div><img src="3.jpg" alt="Berlin Wall"/><h4>Berlin Wall</h4></div>
<div><img src="1.jpg" alt="Brandenburg Port"/><h4>Brandenburg Port</h4></div>
<div><img src="2.jpg" alt="Blue Street Art"/><h4>Blue Street Art</h4></div><div><img src="4.jpg" alt="Ramones Museum"/><h4>Ramones Museum</h4></div>
<div><img src="5.jpg" alt="Kreuzberg"/><h4>Kreuzberg</h4></div>
</div></div>
CSS
Successivamente impostiamo lo stile in modo che le immagini siano larghe come l’intera larghezza disponibile, aggiustiamo alcuni dettagli.
.slider-nav div{ text-align: center; display: block}.slider-for div img,
.slider-nav div img{width:100%; float:left;}.slider-for div h3,
.slider-nav div h4{float:left; width: 100%}.slick-dots{bottom:-50px!important;}
.slick-dots li button:before{font-size: 17px!important;}.slick-slider {
margin-bottom: 0px!important;
}
.slick-prev{left: -30px!important}.slick-prev:before,
.slick-next:before{
color: #000!important;
}
JQuery
Ora arriva la parte cruciale l’inizializzazione dello script con i parametri necessari a far funzionare tutto:
<script type="text/javascript">// <![CDATA[
$(document).ready(function(){$(‘.slider-for’).slick({
slidesToShow: 1,
slidesToScroll: 1,
arrows: false,
fade: true,
asNavFor: ‘.slider-nav’
});$(‘.slider-nav’).slick({
slidesToShow: 4,
slidesToScroll: 1,
asNavFor: ‘.slider-for’,
dots: true,
centerMode: false,
focusOnSelect: true,
autoplay: true,
autoplaySpeed: 2000,
responsive: [
{
breakpoint: 1024,
settings: {
slidesToShow: 3,
slidesToScroll: 3,
infinite: true,
dots: true
}
},
{
breakpoint: 600,
settings: {
slidesToShow: 2,
slidesToScroll: 2
}
}
]
});});
// ]]></script>
slider-for è lo slider principale, impostiamo di visualizzare un immagine per volta (slidesToShow: 1) con effetto fade (fade: true). Da notare asNavFor: ‘.slider-nav’ che dirà allo slider di usare come navigazione lo slider definito sotto.
slider-nav viene utilizzato come navigazione, ha vari parametri da notare l’autoplay impostato a 2000 millisecondi.
- L’attributo slideToShow stabilisce che verranno visualizzate 4 thumbnail nella navigazione.
- L’attributo responsive cambierà il numero di thumbnail visualizzate in base alla larghezza dello schermo (3 sotto i 1024px e 2 sotto i 600px).
Cosi facendo abbiamo ottenuto uno slider molto versatile responsive.
Con questo fantastico plug-in si posso creare molte altri tipologie di Slider Touch. Nei hai qualcuna che ti piace in mente? Suggeriscila nei commenti..
Demo e Download sono disponibili qui di seguito.
Saty Tuned!
Potrebbero interessarti:
