Med en rekke Karuseller der ute, mange for MooTools også, jeg fortsatt besluttet å skrive min egen Carousel klasse, for noen gode grunner
1. Ønsket en personsøker funksjon (for å kunne hoppe et bestemt lysbilde / trinn i karusellen).
2. Ønsket frihet med plassering av Venstre og Høyre / linker, der jeg noen gang vil.
3. Mer kontroll over Slide trinn.
Jeg klarte å lage en ny Carousel, med de ovennevnte funksjoner ... som under ... gjerne foreslå noen endringer du måtte trenge!
Mitt eksempel ser slik ut ... [ Se demo ]
Se demo | Last ned MooTools karusell med Paging Version 1.0 (Nedlastet 1971 ganger)
1. Carousel Personsøker
Du kan enkelt legge til personsøker til karusellen din, ganske enkelt ved å sette paging flagg, som er siste parater passerte mens du oppretter forekomsten av MooCarousel til sann (ønske paging) eller falsk (donot ønsker paging).
Var carousel1 = ny MooCarousel ('carousel1_wrapper', 'carousel1_items_container', 'carousel1_moveleft', 'carousel1_moveright', c_ns, c_sss, true); / / ns = antall lysbilder, sss = lysbilde steg størrelse
Og selvsagt kan du endre utseende-n-følelse av disse personsøk achors som du vil ved å endre deres CSS.
. Carousel_paging {text-align: right; margin: 5px 10px 0 0;}
. Carousel_paging gjeldende, carousel_paging side {skisse: none; bredde:... 15px; høyde: 15px; linje-høyde: 15px; text-align: center; display: block; float: left; bakgrunn: # D8D8EB; margin: 0 1px 0 0; text-decoration: none;}
. Carousel_paging a: hover, carousel_paging nåværende {background: # 4D4D9B; color: # FFFFFF;}..
Vel! det er en liten sak om, sidevekslingen ankere hvis sett, så vil det bli generert alltid etter Carousel komponenten. Jeg ønsket å gjøre det dynamisk også, men da bare for å holde Script for å blåse ut av proporsjoner, bestemte jeg meg for å hoppe over det.
Men du vet litt Javascript, kan du lett endre sidevekslingsfilen generasjon koden i MooCarousel klassen å behage dine behov.
2. Tilpasse Venstre & Høyre Ikoner
Du kan endre plasseringen, bilder eller noen displat eiendom på venstre og høyre knapp bare ved å spille rundt med CSS. å kunne endre plasseringer av Venstre og Høyre buttoms var selve grunnen for meg til høyre for meg vår Carousel Class.
Siden dette MooCarousel klasse, aksepterer id er av disse knappene, kan du faktisk plassere disse knappene hvor som helst på siden, hvis du ber ... det trenger ikke å være i element hierarkiet, som i mitt eksempel.
Var carousel1 = ny 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; stilling: relative; bredde: 23px; høyde: 20px; float: left; markøren: pekeren;}
. Carousel_container_r {background-position: 0-38px;}
. Carousel_container_l {background-position: 0-58px;}
3. Tilpasse Slide Steps
Hva mener jeg Brukerdefinere SLIDE trinn?
De fleste Karuseller skyv fulle med av det synlige vinduet. Så sier du hadde fire elementer (som i mitt eksempelet ovenfor), vil den skyve alle de fire elementene. Med denne Carousel Component, passerer du antall lysbilder og steg størrelsen du ønsker.
Var carousel1 = ny MooCarousel ('carousel1_wrapper', 'carousel1_items_container', 'carousel1_moveleft', 'carousel1_moveright', c_ns, c_sss, true);
c_ns = antall lysbilder, c_sss = lysbilde steg størrelse
Også i mittnavn1 min har jeg calcuted raset trinnet størrelse, basert på logikk der, vet jeg antall elementer, bredde på hvert element, og marginene som har gitt etter hvert element i CSS min.
/ * For Carousal 1 * /
Var c1_w = 92; / / Carousal element Bredde
Var c1_n = 10; / / Antall sammenligning Carousal Elementer
Var c1_pp = 4 / / Antall sammenligning Carousal Elementer perpage
Var c1_marginFactor = 51;
Var c1_sss = c1_w * c1_pp; / / sss = lysbilde steg størrelse
Var c1_ns = parseInt (((c1_w * c1_n) / c1_sss) + 0,5); / / NS = antall lysbilder
c1_sss + = c1_marginFactor; / / sss = lysbilde skritt størrelse, 51 for marginer
Krav: MooTools 1.2
Se demo | Last ned MooTools karusell med Paging Version 1.0 (Nedlastet 1971 ganger)
