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!

  1. è veramente utilissimo ma riscontro qualche problema ovvero il fatto che la tabella(td), che contiene il div, pur essendo a width:100% il div all’interno esce di parecchio dando valori pazzesci di width agli item… ho risolto per ora con @media css
    se trovo una soluzione che rispetti le percentuali vi faccio sapere

  2. niente ho risolto con l’assistenza dello sviluppatore, dava problemi con i ma spostandolo fuori tutto si risolve 😉 spero serva a qualcun’altro. davvero formidabile come slider!

  3. Molto bello e funzionale, lo sto usando ora su un sito, solo che non riesco a farne funzionare 2 con impostazioni differenti sulla stessa pagina, come posso risolvere?

Lascia un commento

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

Questo sito usa Akismet per ridurre lo spam. Scopri come i tuoi dati vengono elaborati.