Duke shprehur IT

Me një shumëllojshmëri të Carousels atje, shumë për Mootools, si dhe, unë ende të vendosur për të shkruar vetë klasën time, Carousel, për disa arsye të mira
1. Kërkuar një funksion paging (që të jetë në gjendje të hidhen një rrëshqitje të veçantë / hap në carousel).
2. Donin lirinë me vendosjen e butonave majtë dhe të djathtë / lidhje, ku unë ndonjëherë ju lutem.
3. Më shumë kontroll mbi hapat e rrëshqitje.

Unë nuk arrijnë të krijojnë një carousel të re, me karakteristikat e mësipërme ... si më poshtë ... Ndjehen të lirë për të sugjeruar ndonjë modifikime ju do të kërkonte!

Shembulli im duket si ky ... [ Demo View ]

Shiko Demo | Download Mootools Carousel Me Versioni Paging 1.0 (shkarkuar 2001 here)

1. Paging Carousel

Ju lehtë mund të shtoni paging për carousel tuaj, thjesht duke vendosur flamurin Paging, e cila është parater fundit kaloi duke krijuar instancën e MooCarousel në të vërtetë (doni paging) ose false (donot duan paging).

var carousel1 = new MooCarousel ('carousel1_wrapper', 'carousel1_items_container', 'carousel1_moveleft', 'carousel1_moveright', c_ns, c_sss, i vërtetë); / / ns = numri i slides, sss = hap rrëshqitje madhësia

Dhe ofcourse ju mund të ndryshojë look-n-ndjehen të këtyre achors paging si ju lutemi duke modifikuar CSS e tyre.

. Carousel_paging {text-align: right; margin: 10px 5px 0 0;}
. Carousel_paging aktuale, carousel_paging faqe {përshkruajë: none; width:... 15px; height: 15px; line-height: 15px; text-align: qendra, display: block; noton: të majtë, background: # D8D8EB; margin: 0 1px 0 0; text-stolisje: none;}

. Carousel_paging a: hover, carousel_paging aktual {background: # 4D4D9B; color: # ffffff;}..

E pra! nuk është një çështje e vogël edhe pse, anchors paging nëse caktuar, atëherë ajo do të gjeneruar gjithmonë pas komponent carousel. Unë të kërkuar për të bërë atë dinamike, si edhe, por pastaj vetëm për të mbajtur Script për defekt nga përmasa, kam vendosur të kaloni atë.
Por ju e dini një Javascript pak, ju lehtë mund të modifikoj kodin brez paging në klasë MooCarousel për të kënaqur nevojat tuaja.

2. Customising ikonat Majtas dhe Djathtas

Ju mund të ndryshoni vendosjen, imazhe ose ndonjë pronë displat e pulsantët majtas dhe djathtas thjesht duke luajtur rreth me CSS. të jetë në gjendje për të ndryshuar vendosje e buttoms majtë dhe të djathtë ishte arsyeja e vërtetë për mua të drejtën tonë Klasa ime carousel.
Që nga kjo Klasa MooCarousel, pranon id Është e këtyre butonave, ju në fakt mund të vendosni këto butonat kudo në faqe, nëse ju lutem ... kjo nuk duhet të jetë në hierarkinë element, si në shembullin tim.

var carousel1 = new MooCarousel ('carousel1_wrapper', 'carousel1_items_container', 'carousel1_moveleft', 'carousel1_moveright', c_ns, c_sss, i vërtetë);

CSS
.. Carousel_container_l, carousel_container_r {margin: 50px 0 0 0; pozicionin: relative; width: 23px; height: 20px; noton: të majtë, kursori: akrep;}

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

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

3. Customising Hapat Slide

Çfarë mund të thotë Hapat e mia Customising SLIDE?
Carousels Shumica rrëshqitje të plotë me të dritares të dukshme. Pra, thonë se ju kishte katër artikuj (si në mostër tim lart), ajo do të rrëshqas të gjitha katër sende. Me këtë komponent, Carousel, Ju kalojë numrin e slides dhe madhësinë hap e zgjedhjes suaj.

var carousel1 = new MooCarousel ('carousel1_wrapper', 'carousel1_items_container', 'carousel1_moveleft', 'carousel1_moveright', c_ns, c_sss, i vërtetë);
c_ns = numri i slides, c_sss = hap rrëshqitje madhësia

Gjithashtu, në example1 time kam calcuted madhësinë hap rrëshqitës, në bazë të logjikës ku, unë e di numrin e artikujve, gjerësi mbi çdo send dhe kufijtë që janë dhënë pas çdo send në CSS tim.

/ * Për aheng 1 * /

var c1_w = 92; Gjerësia / / aheng Item

var c1_n = 10; Numri / / Totali i artikujve të aheng Comparision

var c1_pp = 4 / / Numri i aheng Comparision perpage Items

var c1_marginFactor = 51;

var c1_sss = c1_w * c1_pp; / / hap sss = rrëshqitje madhësia

var c1_ns = Hap parseInt (((c1_w * c1_n) / c1_sss) + 0,5); / / ns = numri i slides

c1_sss + = c1_marginFactor; / / hap sss = rrëshqitje size, 51 për kufijtë

Kërkesa: Mootools 1.2

Shiko Demo | Download Mootools Carousel Me Versioni Paging 1.0 (shkarkuar 2001 here)