Tiny Circleslider – Plugin jQuery – Le slider en cercle original

Aujourd’hui pour la présentation d’un autre plugin jQuery, je vous fais découvrir Tiny Circleslider, un plugin jQuery plutôt original et qui change des sliders beaucoup plus classiques que l’on commence à voir fleurir sur la toile (ce qui est une bonne chose d’ailleurs). Mais avec Tiny Circleslider, vous allez pouvoir proposer à vos visiteurs, un défilement d’images dans un cercle et de manière fluide et agréable.

tiny-circleslider-plugin-jquery

Afin de vous faire une idée, voici le lien vers le site, d’où vous pourrez admirer plusieurs démonstrations.

Ce plugin jQuery peut être paramétré avec diverses options et il fonctionne sur Iphone, Android et Ipad.

Pour l’utiliser, voici la méthode :

L’appel javascript avec jQuery :

$('#rotatescroll1').tinycircleslider();

Et les balises qui seront impactées par le plugin jQuery :

<div id="rotatescroll1">
    <div class="viewport">
        <ul class="overview">
            <li><img src="images/SF1.jpg" alt="" /></li>
            <li><img src="images/SF2.jpg" alt="" /></li>
            <li><img src="images/SF3.jpg" alt="" /></li>
            <li><img src="images/SF4.jpg" alt="" /></li>
            <li><img src="images/SF5.jpg" alt="" /></li>
            <li><img src="images/SF6.jpg" alt="" /></li>
            <li><img src="images/SF7.jpg" alt="" /></li>
            <li><img src="images/SF8.jpg" alt="" /></li>
            <li><img src="images/SF9.jpg" alt="" /></li>
            <li><img src="images/SF10.jpg" alt="" /></li>
            <li><img src="images/SF11.jpg" alt="" /></li>
            <li><img src="images/SF12.jpg" alt="" /></li>
            <li><img src="images/SF13.jpg" alt="" /></li>
            <li><img src="images/SF14.jpg" /></li>
            <li><img src="images/SF15.jpg" /></li>
        </ul>
    </div>

    <div class="overlay"></div>
    <div class="thumb"></div>
</div>

Et vous aurez votre effet de slider version cercle.

Retrouvez le plugin jQuery Tiny Circleslider

Et vous, que pensez vous de cet effet ?

Articles qui peuvent vous intéresser :

Comments
  1. Fouineteau
  2. iAXESS

Leave a Reply

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *


*