Pagpapahayag ng IT

Sa isang iba't ibang mga Carousels out doon, marami para sa mga Mootools pati na rin, ako pa rin ay nagpasya na isulat ang aking sariling Carousel Class, para sa ilang mga magandang dahilan
1. Nais ng isang tampok ng paging (magagawang lumipat sa isang partikular na slide / hakbang sa carousel).
2. Nais kalayaan sa placement ng ang kaliwa at KARAPATAN mga pindutan / link, kung saan kailanman mangyaring ako.
3. Karagdagang kontrol sa Hakbang Slide.

Ako ay pamahalaan upang lumikha ng isang bagong Carousel, sa itaas na tampok ... bilang sa ibaba ... Huwag mag-atubiling upang magmungkahi ng anumang mga pagbabago na nais mong nangangailangan!!!

Ang aking Halimbawa mukhang ganito ... [ View Demo ]

Tingnan ang Demo | ng Download Mootools Carousel Sa Paging Bersyon 1.0 (Nai-download na 1983 ulit)

1. Carousel Paging

Maaari mong madaling magdagdag ng paging sa iyong carousel, lamang sa pamamagitan ng pagtatakda ng paging flag, na kung saan ay ang huling parater na lumipas habang paglikha ng ang halimbawa ng ang MooCarousel sa tunay na (gusto na paging) o maling (donot kinakapos paging).

var carousel1 = bagong MooCarousel ang (na 'carousel1_wrapper', ang 'carousel1_items_container', ang 'carousel1_moveleft', 'carousel1_moveright', c_ns, c_sss, true); / / ns = bilang ng mga slide, sss = slide hakbang laki

At ofcourse mo maaaring baguhin ang hitsura-n-pakiramdam ng mga achors paging bilang ninyo sa pamamagitan ng pagbabago ng kanilang mga CSS.

. Carousel_paging {text-ihanay: karapatan; margin: 5px 10px 0 0;}
. Carousel_paging kasalukuyang, carousel_paging pahina {balangkas: none; lapad:.. 15px; taas: 15px; linya-taas: 15px; text-ihanay: center; display: block; Float: kaliwa; background: # D8D8EB; margin: 0 1px 0 0; text-dekorasyon: none;}

. Carousel_paging isang: Pasadahan, carousel_paging kasalukuyang {background: # 4D4D9B; kulay: # ffffff;}..

Na rin! may isang maliit na isyu na bagaman, Ang mga anchor ng paging kung set, pagkatapos ito ay makapag-nabuo laging pagkatapos ng Carousel bahagi. Nais kong gumawa ng mga ito dynamic pati na rin, ngunit pagkatapos ay upang panatilihin lamang ang Script para sa pamumulaklak ng mga sukat, ako nagpasya upang laktawan ang mga ito.
Ngunit alam mo ang isang maliit na Javascript, maaari mong madaling baguhin ang paging code generation sa MooCarousel klase sa mangyaring ang iyong mga pangangailangan.

2. Customising ang Kaliwa at Kanan Icon

Maaari mong baguhin ang Placement, imahe o anumang displat na ari-arian ng Kaliwa at Kanan mga Pindutan sa pamamagitan lamang ng naglalaro sa paligid sa CSS. na magagawang baguhin ang mga placement ng Kaliwa at Kanan buttoms ay ang aktwal na dahilan para sa akin sa kanan aking aming Carousel Class.
Dahil ang ng ito MooCarousel Class, tumatanggap ng id ang ng mga pindutan, maaari mo talagang ilagay ang mga pindutang ito kahit saan sa pahina, kung mangyaring ... ito ay hindi na sa hierarchy elemento, tulad ng sa aking halimbawa.

var carousel1 = bagong MooCarousel (na 'carousel1_wrapper', ang 'carousel1_items_container', ang 'carousel1_moveleft', 'carousel1_moveright', c_ns, c_sss, true);

CSS
.. Carousel_container_l, carousel_container_r {margin: 50px 0 0 0; posisyon: kamag-anak; width: 23px; taas: 20px; Float: kaliwa; cursor: pointer;}

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

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

3. Customising Hakbang Slide

Ano ang ibig sabihin ko ang MY CUSTOMISING HAKBANG slide?
Karamihan Carousels slide ang buong ng nakikita window. Kaya sabihin mo ay mayroong apat na item (tulad ng sa aking sample sa itaas), ito ay slide ang lahat ng apat na mga item. Sa Carousel Component na ito, ipasa mo ang bilang ng mga slide at ang laki ng hakbang ng iyong napili.

var carousel1 = bagong MooCarousel (na 'carousel1_wrapper', ang 'carousel1_items_container', ang 'carousel1_moveleft', 'carousel1_moveright', c_ns, c_sss, true);
c_ns = bilang ng mga slide, c_sss = slide hakbang laki

Gayundin, sa aking example1 ko calcuted ang laki ng hakbang ng slide, na batay sa lohika kung saan, alam ko ang bilang ng mga item, lapad sa bawat item at ang mga margin na ibinigay pagkatapos ng bawat item sa aking CSS.

/ * Para sa lasingan 1 * /

var c1_w = 92; / / lasingan Item Lapad

var c1_n = 10; / / Kabuuang Bilang ng Item Comparision lasingan

ang var c1_pp = 4 / / Bilang ng mga Comparision Item perpage lasingan

var c1_marginFactor = 51;

var c1_sss = c1_w * c1_pp; / / sss = slide hakbang laki

var c1_ns = parseInt (((c1_w * c1_n) / c1_sss) + .5); / / ns = bilang ng mga slide

c1_sss + = c1_marginFactor ang; / / sss = slide hakbang laki, 51 para sa mga margin

Pangangailangan: Mootools 1.2

Tingnan ang Demo | ng Download Mootools Carousel Sa Paging Bersyon 1.0 (Nai-download na 1983 ulit)