Jesprimi IT

Ma 'varjetà ta karużelli hemmhekk, ħafna għal MooTools kif ukoll, I għadhom iddeċieda li jikteb Klassi tiegħi Carousel stess, għal xi raġunijiet tajba
1. Wanted karatteristika pejġing (li tkun tista 'tiżdied slide partikolari / pass fid-karużell).
2. Riedu libertà mal-tqegħid tal-buttuni XELLUG lemin u / rabtiet, fejn qatt jien jekk jogħġbok.
3. Aktar kontroll fuq il-Passi Slide.

I ma rnexxilhomx joħolqu Carousel ġdid, bil-karatteristiċi ta 'hawn fuq ... kif hawn taħt ... Ħossok liberu li jissuġġerixxu xi modifikazzjonijiet inti tkun teħtieġ!

Eżempju tiegħi tidher bħal dan ... [ Demo View ]

Ara Demo | Download MooTools Carousel Bil Verżjoni Paging 1.0 (ddawnlowdjati 1976 darbiet)

1. Paging Carousel

Tista 'faċilment żid il-pejġing li carousel tiegħek, sempliċiment billi l-bandiera ta' pejġing, li huwa parater aħħar għadda filwaqt li joħolqu l-istanza ta 'l-MooCarousel biex veru (tixtieq paging) jew falza (donot jixtiequ pejġing).

var carousel1 = ġdid MooCarousel ("carousel1_wrapper", "carousel1_items_container", "carousel1_moveleft", "carousel1_moveright", c_ns, c_sss, vera); / / ns = numru ta 'slides, sss = daqs pass slide

U Naturalment tista 'tbiddel il-ħarsa n-sensazzjoni ta' dawn achors pejġing kif jekk jogħġbok billi timmodifika CSS tagħhom.

. Carousel_paging {test tallinja: id-dritt; marġni: 5px 10px 0 0;}
. Carousel_paging attwali, carousel_paging paġna {kontorn: xejn; wisa ':... 15px; għoli: 15px; linja tal-għoli: 15px; test tallinja: taċ-ċentru; display: block; float: xellug; isfond: # D8D8EB; marġni: 0 1px 0 0; test tiżjin: xejn;}

. Carousel_paging: imbagħad jerġgħu, carousel_paging kurrenti {isfond: # 4D4D9B; kulur: # ffffff;}..

Ukoll! hemm kwistjoni żgħir għalkemm, Il-ankri paging jekk stabbiliti, allura se tikseb iġġenerat dejjem wara l-komponent Carousel. Jien ridt li jagħmlu dan bħala dinamiku ukoll, imma mbagħad biss biex iżommu l-Script għall blowing ta 'proporzjonijiet, I iddeċieda li jaqbżuha.
Imma inti taf Javascript ftit, inti tista 'faċilment timmodifika l-kodiċi ġenerazzjoni pejġing fil-klassi MooCarousel li jekk jogħġbok bżonnijiet tiegħek.

2. Customising l Ikoni Xellug & Dritt

Tista 'tbiddel il TQEGĦID, IMAGES jew kwalunkwe proprjetà displat mill-Buttuni Jitħalla u Dritt sempliċiment billi playing madwar mal-CSS. biex ikunu jistgħu jibdlu l-pjazzamenti ta 'l-buttoms Jitħalla u Dritt kienet ir-raġuni attwali għalija li d-dritt tiegħi Klassi Carousel tagħna.
Peress li dan Klassi MooCarousel, taċċetta l-id huwa ta 'dawn il-buttuni, inti tista' attwalment post dawn il-buttuni kullimkien fuq il-paġna, jekk jogħġbok ... ma għandhom ikunu fil-ġerarkija element, bħal f'eżempju tiegħi.

var carousel1 = ġdid MooCarousel ("carousel1_wrapper", "carousel1_items_container", "carousel1_moveleft", "carousel1_moveright", c_ns, c_sss, reali);

CSS
.. Carousel_container_l, carousel_container_r {marġini: 50px 0 0 0; pożizzjoni: relattiva; wisa ': 23px; għoli: 20px; float: xellug; cursor: pointer;}

. Carousel_container_r {isfond-pożizzjoni: 0-38px;}

. Carousel_container_l {isfond-pożizzjoni: 0-58px;}

3. Customising Passi Slide

What do I jfisser PASSI MY slide Customising?
Karużelli Ħafna slide il sħiħa mal tat-tieqa viżibbli. Allura ngħid li kellek erba 'punti (bħal fil-kampjun tiegħi hawn fuq), se slide il-punti kollha erba. Ma 'dan Komponent Carousel, Inti jgħaddu l-għadd ta' slajds u d-daqs pass ta 'l-għażla tiegħek.

var carousel1 = ġdid MooCarousel ("carousel1_wrapper", "carousel1_items_container", "carousel1_moveleft", "carousel1_moveright", c_ns, c_sss, reali);
c_ns = numru ta 'slajds, c_sss = daqs pass slide

Ukoll, example1 tiegħi jien calcuted-daqs pass slide, ibbażata fuq il-loġika fejn, naf numru ta 'oġġetti, wisa fuq kull oġġett u l-marġini li taw wara kull oġġett fil-CSS tiegħi.

/ * Għal carousal 1 * /

var c1_w = 92; Wisa / / carousal Punt

var c1_n = 10; Numru / / totali ta 'Partiti carousal paragun

var c1_pp = 4 / / Numru ta 'perpage paragun Oġġetti carousal

var c1_marginFactor = 51;

var = c1_sss c1_w * c1_pp; / / sss = daqs pass slide

c1_ns var = l parseInt (((c1_w * c1_n) / c1_sss) + 0.5); / / ns = numru ta 'slajds

c1_sss + = c1_marginFactor; / / sss = slide pass daqs, 51 għall-marġini

Ħtiġiet: MooTools 1.2

Ara Demo | Download MooTools Carousel Bil Verżjoni Paging 1.0 (ddawnlowdjati 1976 darbiet)