Creare uno Slider Responsive e Touch Ready con Slick Slider

By Andrea Marchetti
@marchetti_design

Creare uno Slider Responsive e Touch Ready con Slick Slider

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!

Lascia un commento

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

Share