Uttrycka det

Med en mängd Karuseller där ute, många för Mootools också, bestämde jag mig ändå för att skriva min egen Carousel klass, för några goda skäl
1. Önskade ett personsökarsystem funktion (för att kunna hoppa en speciell bild / steg i karusellen).
2. Wanted frihet med placeringen av VÄNSTER och HÖGER knapparna / länkar, vart jag vill.
3. Mer kontroll över Slide steg.

Jag lyckades skapa en ny Carousel, med ovanstående egenskaper ... enligt nedan ... Känn dig fri att föreslå ändringar du skulle behöva!

Mitt exempel ser ut så här ... [ View Demo ]

Visa Demo | Ladda ner Mootools karusell med Paging Version 1.0 (Nedladdat 2006 gånger)

1. Karusellen Paging

Du kan enkelt lägga till paging till karusellen, helt enkelt genom att sätta paging flaggan, vilket är sista parater passerade när du skapar instans av MooCarousel till sann (vill personsökning) eller falskt (donot vill personsökning).

var carousel1 = new MooCarousel ('carousel1_wrapper', 'carousel1_items_container "," carousel1_moveleft "," carousel1_moveright ", c_ns, c_sss, true); / / NS = antal bilder, SSS = slide stegstorlek

Och självklart kan du ändra utseendet-n-känner av dessa personsökning achors som du vill genom att ändra sin CSS.

. Carousel_paging {text-align: höger, marginal: 5px 10px 0 0;}
. Carousel_paging ström, carousel_paging sidan {disposition: none; bredd:... 15px, höjd: 15px; line-height: 15px; text-align: center; display: block; float: left; Bakgrund: # D8D8EB; margin: 0 1px 0 0, text-decoration: none;}

. Carousel_paging en: hover, carousel_paging aktuell {background: # 4D4D9B; color: # FFFFFF;}..

Tja! Det finns en liten fråga dock, om den är inställd The personsökning ankare, så kommer det att bli genereras alltid efter Carousel komponenten. Jag ville göra det dynamiskt också, men då bara för att hålla Script för att blåsa av proportioner, bestämde jag mig för att hoppa över den.
Men du vet lite Javascript, kan du enkelt ändra koden personsökning generationen i MooCarousel klassen att behaga dina behov.

2. Anpassa Vänster och höger ikoner

Du kan ändra placeringen, bilder eller något displat egendom vänster och höger knapparna enkelt genom att spela runt med CSS. för att kunna ändra placeringen av vänster och höger buttoms var den verkliga orsaken för mig att rätta mig vår Carousel klass.
Eftersom denna MooCarousel klass, accepterar ID av dessa knappar, kan du placera faktiskt dessa knappar någonstans på sidan, om ni ... det behöver inte vara i elementet hierarkin, som i mitt exempel.

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, position: förhållande, bredd: 23px; höjd: 20px; float: left; markören: pointer;}

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

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

3. Anpassa Slide Steg

Vad menar jag MINA Anpassa SLIDE steg?
De flesta Karuseller skjuta full med det synliga fönstret. Så säger du hade fyra punkter (som i mitt exemplet ovan), kommer den att glida alla fyra objekt. Med denna Carousel Component, passerar du antalet bilder och steget storlek du väljer.

var carousel1 = new MooCarousel ('carousel1_wrapper', 'carousel1_items_container "," carousel1_moveleft "," carousel1_moveright ", c_ns, c_sss, true);
c_ns = antal bilder c_sss = slide stegstorlek

Också, enligt min example1 har jag calcuted storlek bilden steget, bygger på logik där, jag vet antal artiklar, bredd på varje objekt och de marginaler som har gett efter varje objekt i min CSS.

/ * För SUPKALAS 1 * /

var c1_w = 92, / / ​​SUPKALAS Föremål bredd

var c1_n = 10, / / ​​totala antalet objekt Jämförelsetalen SUPKALAS

var c1_pp = 4 / / Antal Jämförelse SUPKALAS Artiklar perpage

var c1_marginFactor = 51;

var c1_sss = c1_w * c1_pp, / / ​​SSS = slide stegstorlek

var c1_ns = parseInt (((c1_w * c1_n) / c1_sss) + 0,5), / / ​​NS = antal bilder

c1_sss + = c1_marginFactor, / / ​​SSS = slide steg storlek 51 för marginalerna

Krav: Mootools 1,2

Visa Demo | Ladda ner Mootools karusell med Paging Version 1.0 (Nedladdat 2006 gånger)