Avec une variété de carrousels là-bas, de nombreux pour Mootools que bien, j'ai encore décidé d'écrire mon propre classe Carousel, pour de bonnes raisons
1. Recherché une fonctionnalité de pagination (pour être capable de sauter une diapositive particulière / étape dans le carrousel).
2. Voulaient la liberté avec le placement des touches GAUCHE et DROITE / links, où jamais je s'il vous plaît.
3. Plus de contrôle sur les étapes de diapositives.
J'ai réussi à créer un nouveau carrousel, avec les caractéristiques ci-dessus ... comme ci-dessous ... N'hésitez pas à suggérer toute modification vous auriez besoin!
Mon exemple ressemble à ceci ... [ Voir la démo ]
Voir la démo | Télécharger Mootools Carousel Avec la version 1.0 de pagination (Téléchargé 1999 fois)
1. Paging Carousel
Vous pouvez facilement ajouter la pagination à votre carrousel, tout simplement en définissant l'indicateur de pagination, qui est passé parater dernière lors de la création de l'instance de la MooCarousel à true (paging voulez) ou faux (donot vouloir de pagination).
var = new carousel1 MooCarousel ('carousel1_wrapper', 'carousel1_items_container', 'carousel1_moveleft »,« carousel1_moveright », c_ns, c_sss, true); / / ns = nombre de diapositives, sss = taille étape diapositive
Et bien sûr, vous pouvez changer le look-n-feel de ces achors pagination que vous s'il vous plaît en modifiant leur CSS.
. Carousel_paging {text-align: right; margin: 5px 10px 0 0;}
. Carousel_paging actuelle, carousel_paging page {outline: none; largeur:... 15px; hauteur: 15px; line-height: 15px; text-align: center; display: block; float: left; background: # D8D8EB; margin: 0 1px 0 0; text-decoration: none;}
. Carousel_paging a: hover, carousel_paging actuelle {background: # 4D4D9B; color: # ffffff;}..
Eh bien! il ya un petit problème cependant, les ancres de pagination si elle est définie, puis elle sera généré toujours après que le composant Carousel. Je voulais le rendre dynamique ainsi, mais alors juste pour garder le script pour le soufflage des proportions, j'ai décidé de l'ignorer.
Mais vous savez un peu de JavaScript, vous pouvez facilement modifier le code de génération de pagination dans la classe MooCarousel à s'il vous plaît vos besoins.
2. Personnalisation des icônes de gauche et droite
Vous pouvez changer l'emplacement, des images ou tout bien displat des boutons gauche et droit tout simplement en jouant avec le CSS. pour être en mesure de modifier les placements des buttoms gauche et droit était la raison réelle pour moi à droite ma classe de notre Carousel.
Depuis cette classe MooCarousel, accepte l'id est un de ces boutons, vous pouvez y placer ces boutons partout sur la page, s'il vous plaît ... il ne doit pas être dans la hiérarchie des éléments, comme dans mon exemple.
var = new carousel1 MooCarousel ('carousel1_wrapper', 'carousel1_items_container', 'carousel1_moveleft »,« carousel1_moveright », c_ns, c_sss, true);
CSS
.. Carousel_container_l, carousel_container_r {margin: 50px 0 0 0; position: relative; largeur: 23px; hauteur: 20px; float: left; cursor: pointer;}
. Carousel_container_r {background-position: 0-38px;}
. Carousel_container_l {background-position: 0-58px;}
3. Personnalisation étapes de diapositives
QU'EST-CE QUE JE VEUX DIRE MES PAS SLIDE Personnalisation?
La plupart des carrousels de diapositives de la complète avec de la fenêtre visible. Donc, dire que vous aviez quatre éléments (comme dans mon exemple ci-dessus), il glissera tous les quatre articles. Avec cette composante Carousel, vous passer le nombre de diapositives et de la taille étape de votre choix.
var = new carousel1 MooCarousel ('carousel1_wrapper', 'carousel1_items_container', 'carousel1_moveleft »,« carousel1_moveright », c_ns, c_sss, true);
c_ns = nombre de diapositives, c_sss = taille étape diapositive
En outre, dans mon exemple1 j'ai calcuted la taille étape diapositive, basé sur la logique, où, je sais que nombre d'articles, la largeur de chaque élément et les marges qui ont donné après chaque élément dans mon CSS.
/ * Pour Carrousel 1 * /
var = 92 c1_w; Largeur de l'article / / Carrousel
var c1_n = 10; Nombre / / Total des articles Carrousel Comparaison
var c1_pp = 4 / / Nombre de Carrousel Articles perpage Comparaison
var c1_marginFactor = 51;
var = c1_sss c1_w * c1_pp; / / sss = taille étape diapositive
c1_ns var = parseInt (((* c1_w c1_n) / c1_sss) + 0,5); / / ns = nombre de diapositives
c1_sss + = c1_marginFactor; / / sss = taille étape diapositive, 51 pour les marges
Exigences: Mootools 1.2
Voir la démo | Télécharger Mootools Carousel Avec la version 1.0 de pagination (Téléchargé 1999 fois)
