Expressant TI

Amb una varietat de carrusels per aquí, molts de Mootools també, encara em vaig decidir a escriure la meva pròpia classe Carrusel, per algunes bones raons
1. Es busca una funció de localització (per ser capaç de saltar una diapositiva en particular / pas en el carrusel).
2. Volien la llibertat amb la col · locació dels botons ESQUERRA i DRETA / links, allà on em doni la gana.
3. Més control sobre els Passos de diapositives.

Me les vaig arreglar per crear un carrusel de nou, amb les característiques anteriors de la manera ...... Siéntase lliure de suggerir les modificacions que es requereixin!

El meu exemple són aquestes ... [ Veure demostració ]

Veure demo | Descarregar Mootools carrusel Amb la versió 1.0 de paginació (Descarregat 2001 vegades)

1. Carrusel de paginació

Vostè pot afegir fàcilment la paginació al seu carrusel, simplement posant la bandera de paginació, que és Parater última va passar en crear la instància de la MooCarousel a true (vull paginació) o fals (donot desig de paginació).

var = new carousel1 MooCarousel ('carousel1_wrapper', 'carousel1_items_container', 'carousel1_moveleft', 'carousel1_moveright', c_ns, c_sss, true); / / ns = nombre de diapositives, sss = mida de pas de diapositives

I per descomptat es pot canviar el look-n-feel d'aquests achors de paginació al seu gust mitjançant la modificació de la CSS.

. Carousel_paging {text-align: right; margin: 5px 10px 0 0;}
. Carousel_paging actual, carousel_paging pàgina {outline: none; ample: ... 15px; alçada: 15px; line-height: 15px; text-align: center; display: block; float: left; fons: # D8D8EB; margin: 0 1px 0 0; text-decoration: none;}

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

Bé! hi ha un petit problema, però, les àncores de paginació si s'estableix, llavors es genera sempre després que el component de Carrusel. Jo volia fer-ho dinàmic també, però a continuació, només per mantenir la seqüència de comandaments per a la bufa de les proporcions, em vaig decidir a saltar.
Però vostè sap una mica de Javascript, que podria modificar fàcilment el codi de generació de paginació en la classe MooCarousel per complaure a les seves necessitats.

2. Personalització de les icones d'esquerra i dreta

Podeu canviar la ubicació, imatges o qualsevol propietat displat dels botons esquerre i dret, simplement per jugar amb el CSS. ser capaç de canviar les ubicacions dels buttoms esquerra i dreta va ser la raó real per a mi, a la nostra dreta, la meva classe de Carrusel.
Atès que aquesta classe MooCarousel, accepta l'ID és un d'aquests botons, vostè pot col · locar aquests botons en qualsevol lloc de la pàgina, si us plau ... no han d'estar en la jerarquia d'elements, com en el meu exemple.

var = new carousel1 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; Ample: 23px; alçada: 20px; float: left; cursor: pointer;}

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

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

3. Personalització dels passos de diapositives

Què vull dir MEUS PASSOS Personalització de diapositives?
La majoria dels carrusels passeu el ple de la finestra visible. Així que dir que tenia quatre elements (com en el meu exemple anterior), que es lliscarà cap als quatre elements. Amb aquest component de Carrusel, es passa el nombre de diapositives i la mida de pas de la seva elecció.

var = new carousel1 MooCarousel ('carousel1_wrapper', 'carousel1_items_container', 'carousel1_moveleft', 'carousel1_moveright', c_ns, c_sss, true);
c_ns = nombre de diapositives, c_sss = mida de pas de diapositives

A més, en el meu Exemple1 he calcuted la mida de pas de diapositives, basada en la lògica que, ja ho sé nombre d'elements, l'amplada de cada element i els marges que li han donat després de cada element en la meva CSS.

/ * Per orgia 1 * /

var c1_w = 92; l'article / / Ample de gresca

var c1_n = 10; / / nombre total d'articles Comparació de gresca

var c1_pp = 4 / / Nombre de gresca Comparació de productes perpage

var c1_marginFactor = 51;

var = c1_sss c1_w c1_pp * / / sss = mida de pas de diapositives

c1_ns var = parseInt (((* c1_w c1_n) / c1_sss) + 0.5) / / ns = nombre de diapositives

c1_sss + = c1_marginFactor; / / sss slide = mida de pas, de 51 anys per als marges

Requisits: Mootools 01/02

Veure demo | Descarregar Mootools carrusel Amb la versió 1.0 de paginació (Descarregat 2001 vegades)