CarouFredSel è un interessante Plugin jQuery che permette in modo semplice e intuitivo di creare slider orizzontali e verticali di determinati contenuti HTML.
Questo slider (o carosello) è configurabile molto facilmente e si adatta con altri plugin esterni come effetti Lightbox
Il Plugin è personalizzabile al 100% anche grazie agli stili CSS e JavaScript, è possibile vedere le sue potenzialità dalla pagina demo.
Vediamo insieme come installare e utilizzare questo slider.
Installazione jQuery
Prima di tutto andiamo a richiamare tra <head> e </head> la libreria jQuery e il cuore del Plugin.
<script type="text/javascript" language="javascript" src="jquery.js"></script>
<script type="text/javascript" language="javascript" src="jquery.carouFredSel-2.4.3-packed.js"></script>
Una volta inseriti questi due richiami dovremo aprire un JavaScript dove indicare il nome dell’ ID del DIV che vorremo animare.
<script type="text/javascript" language="javascript">
$(document).ready(function() {
$("#item1").carouFredSel();
});
</script>
Come vedete il div che faremo animare dovrà avere ID = item1.
Ora andiamo a vedere la parte HTML base da inserire per diverse tipologie di contenuto.
Per le immagini
<div id="item1">
<img src="img1.jpg" />
<img src="img2.jpg" />
<img src="img3.jpg" />
<img src="img4.jpg" />
<img src="img5.jpg" />
<img src="img6.jpg" />
<img src="img7.jpg" />
<img src="img8.jpg" />
</div>
Per una paginazione
<ul id="item1">
<li> c </li>
<li> a </li>
<li> r </li>
<li> o </li>
<li> u </li>
<li> F </li>
<li> r </li>
<li> e </li>
<li> d </li>
<li> S </li>
<li> e </li>
<li> l </li>
</ul>
Per un contenuto HTML
<div id="item1">
<div>
<h3>Infinity</h3>
<p>A concept that in many fields refers to a quantity without bound or end.</p>
</div>
<div>
<h3>Circular journey</h3>
<p>An excursion in which the final destination is the same as the starting point.</p>
</div>
<div>
<h3>jQuery</h3>
<p>jQuery is a cross-browser JavaScript library designed to simplify the client-side scripting.</p>
</div>
<div>
<h3>Carousel</h3>
<p>A carousel is an amusement ride consisting of a rotating circular platform with seats.</p>
</div>
</div>
Caratteristiche
Ecco alcune caratteristiche fondamentali di questo Plugin jQuery.
- Trasforma qualsiasi tipo di elemento HTML in uno slider orizzontale o verticale.
- Scorre uno o più oggetti contemporaneamente.
- Scorre automaticamente o con l’interazione dell’utente.
- Ridimensiona automaticamente larghezza e altezza.
- Ottimizzato per navigazione da tastiera.
- Disponibili eventi personalizzati, metodi e molte opzioni.
- Compatibile con i più diffusi (jQuery) lightbox-plugins.
- GET e (re) SET opzioni di configurazione dopo l’esecuzione.
Esempi Extra
Inoltre vi segnalo questi esempi e metodi di implementazione dello slider.
- Slider Base
- Slider con diversi contenuti
- Slider con interazione utente
- Uso di funzioni Callback
- Uso di eventi personalizzabili
- Slider con diverse dimensioni di contenuto
- Slider personalizzato da eventi
- Slider + Lightbox
- Uso di 15 Slider simultanei
Abbiamo la possilità di leggere la documentazione per la configurazione del plugin sul sito ufficiale oppure seguire il Forum.
Inoltre vi segnalo la possbilità di creare il codice Slider con un Wizard automatico.
Questo Plugin è molto simile ad un altro che avevo gia segnalato, jQuery Slider.
6 Commenti
Molto interessante sembra super!
Fantastico!!! Stavo cercando uno spider così!!!!
Sembra più funzionale di jQuery Slider! Bello!
Questo plugin non l’avevo mai vist.. molto carino!
Proprio quello che stavo cercando!!! ma leggi nel pensiero?? :)
molto carino, grazie!
come compatibilità dei vari browser? sul sito non mi sembra di aver trovato nulla