Vyjadrenie IT

S rôznymi kolotoče vonku, veľa pre MooTools tiež, stále sa rozhodol napísať vlastnú Carousel triedy, pre niektoré z dobrých dôvodov
1. Chcel stránkovací funkcie (mohli skočiť konkrétny snímok / krok v karuselu).
2. Chceli slobodu, umiestnenie na ľavý a pravý tlačidlá či odkazy, kde vôbec sa mi zapáči.
3. Väčšiu kontrolu nad Slide schodov.

Ja sa podarilo vytvoriť nový Carousel, s vyššie uvedenými funkciami ... ako je uvedené nižšie ... Nebojte sa navrhnúť nejaké zmeny by ste vyžadovať!

Môj Príklad vyzerá takto ... [ View Demo ]

Zobraziť Demo záložky | Stiahnuť MooTools Carousel S stránkovacieho verzia 1.0 (stiahnuté 2006 krát)

1. Kolotoč Paging

Môžete ľahko pridať stránkovania do kolotoča, jednoducho nastavením stránkovací vlajku, čo je posledný parater prešiel pri vytváraní inštancie MooCarousel na hodnotu true (chcete stránkovací) alebo false (donot chce stránkovania).

var carousel1 = new MooCarousel ("carousel1_wrapper ',' carousel1_items_container ',' carousel1_moveleft ',' carousel1_moveright" c_ns, c_sss, true); / / ns = počet snímok, sss = snímok veľkosť kroku

A samozrejme môžete zmeniť vzhľad-n-štýl týchto vyhľadávacích achors, ako je libo úpravou ich CSS.

. Carousel_paging {text-align: právo; margin: 5px 10px 0 0;}
. Carousel_paging prúd, carousel_paging stránku {outline: none; šírka: týždeň. 15px, výška: 15px; line-height: 15px; text-align: centrum; display: block; float: left; pozadia: # D8D8EB; margin: 0 1px 0 0; text-decoration: none;}

. Carousel_paging: hover, carousel_paging prúd {background: # 4D4D9B, color: # FFFFFF;} ..

No! tam je malý problém keď, ak je nastavená, stránkovací kotvy potom to dostane generovaný vždy po Carousel komponenty. Chcel som, aby to dynamický tiež, ale potom už len, aby scenár k fúkanie rozmerov, rozhodol som sa ju preskočiť.
Ale viete, trochu Javascript, môžete ľahko upraviť stránkovací generácie kód v MooCarousel triede potešiť svoje potreby.

2. Prispôsobenie ľavý a pravý ikony

Môžete zmeniť umiestnenie, obrázky ani disple majetok z ľavého a pravého tlačidla jednoducho tým, že hranie sa s CSS. mať možnosť zmeniť umiestnenie medzi ľavým a pravým Privolávacie bol skutočný dôvod, aby som na pravú mojej našej Carousel triedy.
Vzhľadom k tomu, MooCarousel triedy, prijme id je z týchto tlačidiel, môžete skutočne umiestniť tieto tlačidlá kdekoľvek na stránke, prosím ... to nemusí byť v hierarchii prvkov, ako v mojom príklade.

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; pozície: relatívna, šírka: 23px; výška: 20px; float: left; cursor: pointer;}

. Carousel_container_r {background-position: 0-38px;}

. Carousel_container_l {background-position: 0-58px;}

3. Prispôsobenie snímok kroky

Čo tým myslím MOJE Prispôsobenie snímok kroky?
Väčšina Kolotoč posuňte plne s z viditeľného okna. Takže povedať, že mal štyri položky (ako v mojom vzorke vyššie), bude to kĺzať všetky štyri položky. S týmto Carousel Component, miniete niekoľko snímok a veľkosť kroku podľa vášho výberu.

var carousel1 = new MooCarousel ("carousel1_wrapper ',' carousel1_items_container ',' carousel1_moveleft ',' carousel1_moveright" c_ns, c_sss, true);
c_ns = počet snímok, c_sss = snímok veľkosť kroku

Aj v mojom example1 som calcuted prezentáciu veľkosť kroku, založený na logike kde, viem, že počet položiek, šírka na každej položky a marží, ktoré dali za každou položkou v mojom CSS.

/ * Pre Pitka 1 * /

var c1_w = 92 / / Pitka položky Šírka

var c1_n = 10 / / Celkový počet položiek porovnávané Pitka

var c1_pp = 4 / / Počet porovnávanej perpage Pitka položky

var c1_marginFactor = 51;

var c1_sss = c1_w * c1_pp / / sss = snímok veľkosť kroku

var c1_ns = parseInt (((c1_w * c1_n) / c1_sss) + 0.5) / / ns = počet snímok

c1_sss + = c1_marginFactor, / / ​​sss = snímok veľkosť kroku, 51 pre okraje

Požiadavky: MooTools 1.2

Zobraziť Demo záložky | Stiahnuť MooTools Carousel S stránkovacieho verzia 1.0 (stiahnuté 2006 krát)