S různými kolotoče venku, mnoho pro Mootools také, pořád se rozhodl napsat vlastní Carousel třídy, pro některé z dobrých důvodů
1. Chtěl stránkovací funkce (mohli skočit konkrétní snímek / krok v karuselu).
2. Chtěli svobodu, umístění na levý a pravý tlačítka či odkazy, kde vůbec se mi zlíbí.
3. Větší kontrolu nad Slide schodů.
Já se podařilo vytvořit nový Carousel, s výše uvedenými funkcemi ... jak je uvedeno níže ... Nebojte se navrhnout nějaké změny byste vyžadovat!
Můj Příklad vypadá takto ... [ View Demo ]
Zobrazit Demo záložky | Stáhnout Mootools Carousel S stránkovacího verze 1.0 (staženo 1989 krát)
1. Kolotoč Paging
Můžete snadno přidat stránkování do kolotoče, jednoduše nastavením stránkovací vlajku, což je poslední parater prošel při vytváření instance MooCarousel na hodnotu true (chcete stránkovací) nebo false (donot chce stránkování).
var carousel1 = new MooCarousel ("carousel1_wrapper ',' carousel1_items_container ',' carousel1_moveleft ',' carousel1_moveright" c_ns, c_sss, true); / / ns = počet snímků, sss = snímek velikost kroku
A samozřejmě můžete změnit vzhled-n-styl těchto vyhledávacích achors, jak je libo úpravou jejich CSS.
. Carousel_paging {text-align: právo; margin: 5px 10px 0 0;}
. Carousel_paging proud, carousel_paging stránku {outline: none; šířka: týden. 15px, výška: 15px; line-height: 15px; text-align: centrum; display: block; float: left; pozadí: # D8D8EB; margin: 0 1px 0 0; text-decoration: none;}
. Carousel_paging: hover, carousel_paging proud {background: # 4D4D9B, color: # FFFFFF;}..
No! tam je malý problém když, pokud je nastavena, stránkovací kotvy pak to dostane generován vždy po Carousel komponenty. Chtěl jsem, aby to dynamický také, ale pak už jen, aby scénář k foukání rozměrů, rozhodl jsem se ji přeskočit.
Ale víte, trochu Javascript, můžete snadno upravit stránkovací generace kód v MooCarousel třídě potěšit své potřeby.
2. Přizpůsobení levý a pravý ikony
Můžete změnit umístění, obrázky ani displat majetek z levého a pravého tlačítka jednoduše tím, že hraní si s CSS. mít možnost změnit umístění mezi levým a pravým PŘIVOLÁVAČE byl skutečný důvod, abych na pravou mé naší Carousel třídy.
Vzhledem k tomu, MooCarousel třídy, přijme id je z těchto tlačítek, můžete skutečně umístit tato tlačítka kdekoliv na stránce, prosím ... to nemusí být v hierarchii prvků, jako v mém příkladu.
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; pozice: relativní, šířka: 23px; výška: 20px; float: left; cursor: pointer;}
. Carousel_container_r {background-position: 0-38px;}
. Carousel_container_l {background-position: 0-58px;}
3. Přizpůsobení snímků kroky
Co tím myslím MOJE Přizpůsobení snímků kroky?
Většina Kolotoč posuňte plně s z viditelného okna. Takže říct, že měl čtyři položky (jako v mém vzorku výše), bude to klouzat všechny čtyři položky. S tímto Carousel Component, minete několik snímků a velikost kroku dle vašeho výběru.
var carousel1 = new MooCarousel ("carousel1_wrapper ',' carousel1_items_container ',' carousel1_moveleft ',' carousel1_moveright" c_ns, c_sss, true);
c_ns = počet snímků, c_sss = snímek velikost kroku
Také v mém example1 jsem calcuted prezentaci velikost kroku, založený na logice kde, vím, že počet položek, šířka na každé položky a marží, které dali za každou položkou v mém CSS.
/ * Pro pitka 1 * /
var c1_w = 92 / / pitka položky Šířka
var c1_n = 10 / / Celkový počet položek porovnávané pitka
var c1_pp = 4 / / Počet porovnávané perpage pitka položky
var c1_marginFactor = 51;
var c1_sss = c1_w * c1_pp / / sss = snímek velikost kroku
var c1_ns = parseInt (((c1_w * c1_n) / c1_sss) + 0.5) / / ns = počet snímků
c1_sss + = c1_marginFactor, / / sss = snímek velikost kroku, 51 pro okraje
Požadavky: Mootools 1.2
Zobrazit Demo záložky | Stáhnout Mootools Carousel S stránkovacího verze 1.0 (staženo 1989 krát)
