Monien Karusellit siellä, monet Mootools myös, olen silti päättänyt kirjoittaa oman Carousel luokka, on hyviä syitä
1. Halutaan henkilöhaku ominaisuus (voisi siirtyä erityisesti dia / askel karuselli).
2. Ostetaan vapaus sijainnin vasen ja oikea painike / linkkejä, missä ikinä olen hyvä.
3. Lisää valvoa Slide Steps.
En onnistunut luomaan uuden Carousel, jossa edellä mainitut ominaisuudet ... alla ... Voit vapaasti ehdottaa muutoksia te vaatisi!
Oma esimerkki näyttää tältä ... [ View Demo ]
Katso esittely | Lataa Mootools Carousel With Paging 1.0 (Downloaded 1989 kertaa)
1. Carousel Hakulaite
Voit helposti lisätä henkilöhaku teidän karuselli yksinkertaisesti asettamalla henkilöhaku lippu, joka on viimeinen parater läpäissyt luotaessa esiintymän MooCarousel todelliseen (haluta paging) tai epätosi (antaja haluaa paging).
var carousel1 = new MooCarousel (carousel1_wrapper ',' carousel1_items_container ',' carousel1_moveleft ',' carousel1_moveright ", c_ns, c_sss, true); / / ns = useita dioja, SSS = slide askelkoko
Ja tietysti voit muuttaa ulkoasua-n-tuntuu näiden henkilöhaku achors kuten haluat muokkaamalla sen CSS.
. Carousel_paging {text-align: right; margin: 5px 10px 0 0;}
. Carousel_paging. Nykyinen. Carousel_paging. Sivu {outline: none; width: 15px; height: 15px; line-height: 15px; text-align: center; display: block; float: left; background: # D8D8EB; margin: 0 1px 0 0; text-decoration: none;}
. Carousel_paging: hover. Carousel_paging. Nykyinen {background: # 4D4D9B; color: # ffffff;}
No! on pieni asia kuitenkin, henkilöhaku ankkurit jos asetettu, niin se saa syntyy aina kun Carousel komponentti. Halusin tehdä dynaamisia samoin, mutta sitten vain pitää Script puhaltaa ulos mittasuhteet, päätin ohittaa sen.
Mutta te tiedätte vähän Javascript, voit helposti muokata henkilöhaku sukupolvi koodin MooCarousel luokassa miellyttää teidän tarpeisiin.
2. Kustomointi vasen ja oikea kuvakkeet
Voit muuttaa sijoitusta, IMAGES tai displat omaisuutta vasenta ja oikeaa näppäintä yksinkertaisesti pelaa noin kanssa CSS. pystyä muuttamaan sijoitukset vasen ja oikea buttoms oli todellinen syy minun oikealle minun meidän Carousel luokka.
Koska MooCarousel luokan hyväksyy id on näitä painikkeita, voit itse sijoittaa nämä painikkeet mihin tahansa sivulla, jos sallitte ... ei tarvitse olla elementin hierarkiassa, kuten minun esimerkiksi.
var carousel1 = new 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; kanta: suhteellinen, leveys: 23px; height: 20px; float: left; kohdistimen: osoitinta;}
. Carousel_container_r {background-position: 0-38px;}
. Carousel_container_l {background-position: 0-58px;}
3. Kustomointi Slide Steps
Mitä tarkoitan MINUN Kustomointi SLIDE vaiheet?
Useimmat Karusellit liu'uta täynnä on näkyvissä ikkunasta. Joten sano oli neljä kohteita (kuten minun esimerkin kohta), se liukuu kaikki neljä aihetta. Tämän Carousel Component, Ohitat määrä dioja ja askel haluamansa kokoiseksi.
var carousel1 = new MooCarousel (carousel1_wrapper ',' carousel1_items_container ',' carousel1_moveleft ',' carousel1_moveright ", c_ns, c_sss, true);
c_ns = useita dioja, c_sss = slide askelkoko
Myös minun Esimerkki1 olen calcuted dia askeleen koko sen logiikka missä, tiedän kappalemäärä, leveys kunkin kohteen ja marginaalit, jotka ovat antaneet jälkeen kunkin kohteen CSS.
/ * Jos juomingit 1 * /
var c1_w = 92; / / juomingit Item leveys
var c1_n = 10; / / kokonaislukumäärä Vertailuvuoden juomingit Tuotteet
var c1_pp = 4 / / määrä Vertailuvuoden juomingit Tuotteet perpage
var c1_marginFactor = 51;
var c1_sss = c1_w * c1_pp; / / SSS = slide askelkoko
var c1_ns = parseInt (((c1_w * c1_n) / c1_sss) + 0.5) / / ns = useita dioja
c1_sss + = c1_marginFactor; / / SSS = slide askeleen koko, 51 ja marginaalit
Vaatimukset: Mootools 1,2
Katso esittely | Lataa Mootools Carousel With Paging 1.0 (Downloaded 1989 kertaa)
