Les exemples suivants illustrent les possibilités de jCarousel:
<script type="text/javascript" src="/path/to/jquery-1.4.2.min.js"></script> <script type="text/javascript" src="/path/to/lib/jquery.jcarousel.min.js"></script> <link rel="stylesheet" type="text/css" href="/path/to/skin/skin.css" />Le package de téléchargement contient des paquets de peau par exemple. N'hésitez pas à créer vos propres skins sur cette base.
jCarousel s'attend à une structure très simple balisage HTML dans votre document HTML:
<ul id="mycarousel" class="jcarousel-skin-name">
<!-- Le contenu va ici -->
</ul>jCarousel encapsule automatiquement les balises HTML nécessaires autour de la liste. L'attribut de classe s'applique sur la peau jCarousel "nom" dans le carrousel.Pour jCarousel configuration, ajoutez le code suivant dans la balise <head> de votre document HTML:
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery('#mycarousel').jcarousel({
// Configuration va ici
});
});
</script>jCarousel accepte de nombreuses options de configuration, voir le chapitre "Configuration" pour plus d'informations.
Après jCarousel a été initialisé, le balisage entièrement créé dans les DOM est la suivante:
<div class="jcarousel-skin-name"> <div class="jcarousel-container"> <div class="jcarousel-clip"> <ul class="jcarousel-list"> <li class="jcarousel-item-1">First item</li> <li class="jcarousel-item-2">Second item</li> </ul> </div> <div disabled="disabled" class="jcarousel-prev jcarousel-prev-disabled"></div> <div class="jcarousel-next"></div> </div> </div>Comme vous pouvez le voir, il ya certains éléments qui ont affecté ajouté classes (en plus des classes que vous avez déjà attribuées manuellement). N'hésitez pas à la conception de votre carrousel avec les classes que vous pouvez voir ci-dessus.
Note:
* La classe de la peau "jCarousel-peau-name " a été déplacé de la <ul> à l'élément <div> haut.
* s Les 2 derniers <div> imbriqués »dans class="jcarousel-container"> <div sont les suivant / précédent boutons du carrousel. Le premier illustre un bouton désactivé, la deuxième, une activé. Le bouton a désactivé l'attribut disabled (ce qui en fait effectivement aucun sens pour les éléments <div>, mais vous pouvez également utiliser des éléments <button> ou ce que vous voulez) ainsi que la classe additionnelle jCarousel-prev-handicapés (ou jCarousel-next-personnes handicapées).
* Tous les éléments <li> de la liste ont la classe jCarousel point-n où n représente affecté la position dans la liste.
* Non illustré ici, que toutes les classes sont suivies par des classes supplémentaires avec un suffixe dépend de l'orientation du carrousel, à savoir. jcarousel-list-horizontal"> class="jcarousel-list <ul pour un carrousel horizontal.
..........à Suivre
RSS Feed (xml)
Aucun commentaire:
Enregistrer un commentaire