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 1984 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 1984 here)
