jQuery Carousel con supporto touch e responsive

Oggi vi segnalo un nuovo carousel jQuery con supporto touch e impostazione responsive ideale per i vostri nuovi progetti. Uno script jQuery indispensabile!

Molto spesso ci affidiamo (io in primis) ai tanto blasonati “colossi” come jCarousel e CarouFredSel, ma se ci fossero delle alternative altrettanto valide o forse migliori? Bhè è il caso di Owl Carousel un nuovo script jQuery rilasciato gratuitamente che permette di creare slideshow e carousel in modo facile e veloce, tenendo conto di alcuni aspetti essenziali nel web odierno.

Tra le feature principali del carousel jQuery di oggi annoveriamo:

• Completamente responsive
• Touch compatible 
• CSS3
• Possibilità di implementare facilmente molteplici istanze senza problemi

Un ottimo prodotto insomma, completo, funzionale e sopratutto al passo coi tempi. Molto interessante la sezione demo offerta dal sito ufficiale dove ci vengono mostrate possibili applicazioni come la possibilità di usare lo script in modalità “slide” (ovvero con singola immagine che scorre) e la possibilità di creare dimensioni custom per le varie thumb presenti nel carrello.

Implementazione del carousel jQuery

Caricamento librerie essenziali

<link rel="stylesheet" href="owl-carousel/owl.carousel.css">
<link rel="stylesheet" href="owl-carousel/owl.theme.css">
<script src="jquery-1.9.1.min.js"></script>
<script src="assets/owl-carousel/owl.carousel.js"></script>

Struttura HTML

<div id="owl-example" class="owl-carousel">
  <div> Your Content </div>
  <div> Your Content </div>
  <div> Your Content </div>
  <div> Your Content </div>
  <div> Your Content </div>
  <div> Your Content </div>
  <div> Your Content </div>
  ...
</div>

Molto interessante questa parte di codice, dato che questo carousel è uno dei pochi mai visti nel web che non usa il “solito” ul – li  per organizzare gli elementi. Per quanto mi riguarda è una nota a favore.

Impostare lo script

$(document).ready(function() {

  $("#owl-example").owlCarousel();

});

Come sempre ecco il link per il download dello script:

[button link=”http://owlgraphic.com/owlcarousel/index.html” color=”blue” target=”blank” size=”large”]Sito ufficiale[/button] [button link=”http://www.targetweb.it/download/2013/owl.carousel.zip” color=”blue” target=”blank” size=”large”]Download[/button]

Questo script ti è servito? Lo hai usato in un tuo progetto? Condividilo con noi nei commenti o su Facebook!