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.

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.

Author

Sono un Creative Strategist con più di 10 anni di esperienza in strategie digitali. Il mio ruolo di Stratega consiste nell’ideare e sviluppare concept creativi per progetti multicanale, individuando le attivazioni e dinamiche di Marketing da applicare attraverso un approccio strategico.

6 Commenti

  1. molto carino, grazie!
    come compatibilità dei vari browser? sul sito non mi sembra di aver trovato nulla

Commenti