Slidorion – Plugin jQuery – Un Slider couplé à un menu accordéon et bien plus !

Vous cherchez un slider en javascript ? Mieux, en jQuery ? De plus, couplé à un menu accordéon avec du contenu afin de rendre l’utile à l’agréable ? Slidorion est le plugin qu’il vous faut. En effet, vous allez pouvoir faire défiler des images (avec textes, html etc… ou non) avec un menu associé et son bloc de contenu. Autant dire que ce plugin jQuery est intéressant pour agrémenter un page web.

slidorion-plugin-jquery-js

Comment utiliser ce plugin jQuery :

Importer les librairies dans le document (dans le « head » – css+js) :

<link rel="stylesheet" href="css/slidorion.css" />

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="js/jquery.easing.js"></script>
<script src="js/jquery.slidorion.min.js"></script>

Vous l’aurez compris, easing est nécessaire au bon fonctionnement de Slidorion.
Télécharger Easing

Construire la structure qui deviendra notre Slider à menu :

<div id="slidorion">
    <div id="slider">
        <div class="slide"></div>
        <div class="slide"></div>
        <div class="slide"></div>
    </div>
   
    <div id="accordion">
        <div class="link-header">New Features</div>
        <div class="link-content">
            <!-- content -->
        </div>
        <div class="link-header">A Simple Image</div>
        <div class="link-content">
            <!-- content -->
        </div>
        <div class="link-header">Background Image w/ HTML</div>
        <div class="link-content">
            <!-- content -->
        </div>
    </div>
</div>

Et l’initiation basique du plugin :

$(document).ready(function(){
    $('#slidorion').slidorion();
});

Bien entendu, il existe de multiples options, comme la vitesse de changement, des effets tels que les fondus, les intervalles etc…

Vous pouvez directement télécharger le plugin Slidorion.

Vous avez des démonstrations complètes sur le site du plugin jQuery Slidorion.

Un bon petit plugin jQuery bien pratique.

Et vous qu’en pensez vous ?

Articles qui peuvent vous intéresser :

No Responses

Leave a Reply

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


*