Met een verscheidenheid van carrousels die er zijn, veel voor Mootools ook, heb ik toch besloten om mijn eigen Carousel Class schrijven, voor een aantal goede redenen
1. Gezocht een oproepbericht feature (kunnen een bepaalde schuif / stap in de carrousel springen).
2. Wanted vrijheid met plaatsing van de knoppen LINKS en RECHTS / links, waar ik ook neem.
3. Meer controle over de Slide Steps.
Ik slaagde erin om een nieuwe carrousel te maken, met de bovenstaande kenmerken ... zoals hieronder ... Voel je vrij om alle wijzigingen die u zou moeten! Suggereren!
Mijn voorbeeld ziet er zo uit ... [ Demo bekijken ]
Bekijk de demo | Download Mootools carrousel met Paging Versie 1.0 (gedownload 1989 keer)
1. Carousel Paging
U kunt de paging eenvoudig toe te voegen aan uw carrousel, simpelweg door het instellen van de paging-vlag, die als laatste parater gepasseerd tijdens het maken van de aanleg van de MooCarousel om waar te (willen paging) of onwaar (donot willen paging).
var carousel1 = new MooCarousel ('carousel1_wrapper', 'carousel1_items_container', 'carousel1_moveleft', 'carousel1_moveright', c_ns, c_sss, true); / / ns = aantal dia's, sss = slide stapgrootte
En natuurlijk kunt u de look-n-feel van deze paging achors als je wilt door aanpassing van hun CSS.
. Carousel_paging {text-align: right; margin: 5px 10px 0 0;}
. Carousel_paging huidige, carousel_paging pagina {outline: none; breedte:... 15px; height: 15px; line-height: 15px; text-align: center; display: block; float: left; background: # D8D8EB; margin: 0 1px 0 0; text-decoration: none;}
. Carousel_paging a: hover, carousel_paging huidige {background: # 4D4D9B; color: # ffffff;}..
Nou! Er is echter een klein probleem, de paging-ankers, indien ingesteld, dan krijgt altijd gegenereerd nadat de Carousel component. Ik wilde om het dynamisch ook, maar dan alleen om het script te houden voor het uitblazen van de proporties, heb ik besloten om over te slaan.
Maar je een beetje Javascript kennen, kunt u gemakkelijk aanpassen van het wisselbestand generatie code in de MooCarousel klasse aan uw behoeften te behagen.
2. Aanpassen van de links en rechts Pictogrammen
U kunt de PLAATSING, afbeeldingen of enig displat eigendom van de knoppen Links en Rechts door simpelweg te spelen met de CSS. in staat zijn om de plaatsing van de linker en rechter Buttoms te wijzigen was de werkelijke reden voor mij om mijn recht onze Carousel Class.
Aangezien dit MooCarousel klasse, aanvaardt de id's van deze knoppen, kun je eigenlijk overal kunt plaatsen op deze toetsen op de pagina, als het u belieft ... het hoeft niet te zijn in het element hiërarchie, zoals in mijn voorbeeld.
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: relative; width: 23px; height: 20px; float: left; cursor: pointer;}
. Carousel_container_r {background-position: 0-38px;}
. Carousel_container_l {background-position: 0-58px;}
3. Aanpassen van Slide Steps
Wat bedoel ik MIJN aanpassen SLIDE STAPPEN?
De meeste Draaimolens schuif de vol van het zichtbare venster. Dus zeggen dat je had vier items (zoals in mijn voorbeeld hierboven), zal het schuift alle vier de items. Met deze Carrousel Component, U passeert het aantal dia's en de stap grootte van uw keuze.
var carousel1 = new MooCarousel ('carousel1_wrapper', 'carousel1_items_container', 'carousel1_moveleft', 'carousel1_moveright', c_ns, c_sss, true);
c_ns = aantal dia's, c_sss = slide stapgrootte
Ook in mijn example1 heb ik de foto stapgrootte calcuted, gebaseerd op logica, waar, ik weet het aantal items, breedte op elk item en de marges die zijn gegeven na elk item in mijn CSS.
/ * Voor drinkgelag 1 * /
var c1_w = 92; / / drinkgelag Item Breedte
var c1_n = 10; / / Totaal aantal Aanbiedingen drinkgelag Items
var c1_pp = 4 / / Aantal Aanbiedingen drinkgelag Items perpage
var c1_marginFactor = 51;
var c1_sss = c1_w * c1_pp; / / sss = slide stapgrootte
var c1_ns = parseInt (((c1_w * c1_n) / c1_sss) + 0,5) / / ns = aantal dia's
c1_sss + = c1_marginFactor; / / sss = slide stapgrootte, 51 voor de marges
Vereisten: Mootools 1.2
Bekijk de demo | Download Mootools carrousel met Paging Versie 1.0 (gedownload 1989 keer)
