Carrusel simple Con la paginación mediante Mootools
Con una variedad de carruseles por ahí, muchos de Mootools también, todavía me decidí a escribir mi propia clase Carrusel, por algunas buenas razones
1. Se busca una función de localización (para ser capaz de saltar una diapositiva en particular / paso en el carrusel).
2. Querían la libertad con la colocación de los botones IZQUIERDA y DERECHA / links, donde quiera que me dé la gana.
3. Más control sobre los Pasos de diapositivas.
Me las arreglé para crear un carrusel de nuevo, con las características anteriores de la siguiente manera ... ... Siéntase libre de sugerir las modificaciones que se requieran!
Mi ejemplo se parece a esto ... [ Ver demostración ]
Ver demo | Descargar Mootools carrusel Con la versión 1.0 de paginación (Descargado 1999 veces)
1. Carrusel de paginación
Usted puede agregar fácilmente la paginación a su carrusel, simplemente poniendo la bandera de paginación, que es Parater última pasó al crear la instancia de la MooCarousel en true (quiero paginación) o falso (donot deseo de paginación).
var = new carousel1 MooCarousel ('carousel1_wrapper', 'carousel1_items_container', 'carousel1_moveleft', 'carousel1_moveright', c_ns, c_sss, true); / / ns = número de diapositivas, sss = tamaño de paso de diapositivas
Y por supuesto se puede cambiar el look-n-feel de estos achors de paginación a su gusto mediante la modificación de la CSS.
. Carousel_paging {text-align: right; margin: 5px 10px 0 0;}
. Carousel_paging actual, carousel_paging página {outline: none; ancho:... 15px; altura: 15px; line-height: 15px; text-align: center; display: block; float: left; fondo: # D8D8EB; margin: 0 1px 0 0; text-decoration: none;}. Carousel_paging a: hover, carousel_paging actual {background: # 4D4D9B; color: # ffffff;}..
Bueno! hay un pequeño problema, sin embargo, las anclas de paginación si se establece, entonces se genera siempre después de que el componente de Carrusel. Yo quería hacerlo dinámico también, pero a continuación, sólo para mantener la secuencia de comandos para la sopla de las proporciones, me decidí a saltar.
Pero usted sabe un poco de Javascript, que podría modificar fácilmente el código de generación de paginación en la clase MooCarousel para complacer a sus necesidades.
2. Personalización de los iconos de izquierda y derecha
Puede cambiar la ubicación, imágenes o cualquier propiedad displat de los botones izquierdo y derecho, simplemente por jugar con el CSS. ser capaz de cambiar las ubicaciones de los Buttoms izquierda y derecha fue la razón real para mí, a nuestra derecha, mi clase de Carrusel.
Dado que esta clase MooCarousel, acepta el ID es uno de estos botones, usted puede colocar estos botones en cualquier lugar de la página, por favor ... no tienen que estar en la jerarquía de elementos, como en mi ejemplo.
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; Ancho: 23px; altura: 20px; float: left; cursor: pointer;}. Carousel_container_r {background-position: 0-38px;}
. Carousel_container_l {background-position: 0-58px;}
3. Personalización de los pasos de diapositivas
¿Qué quiero decir MIS PASOS Personalización de diapositivas?
La mayoría de los carruseles deslice el pleno de la ventana visible. Así que decir que tenía cuatro elementos (como en mi ejemplo anterior), que se deslizará hacia los cuatro elementos. Con este componente de Carrusel, se pasa el número de diapositivas y el tamaño de paso de su elección.
var = new carousel1 MooCarousel ('carousel1_wrapper', 'carousel1_items_container', 'carousel1_moveleft', 'carousel1_moveright', c_ns, c_sss, true);
c_ns = número de diapositivas, c_sss = tamaño de paso de diapositivas
Además, en mi ejemplo1 he calcuted el tamaño de paso de diapositivas, basada en la lógica que, ya lo sé número de elementos, la anchura de cada elemento y los márgenes que le han dado después de cada elemento en mi CSS.
/ * Para orgía 1 * /
var c1_w = 92; del artículo / / Ancho de juerga
var c1_n = 10; / / número total de artículos Comparación de juerga
var c1_pp = 4 / / Número de juerga Comparación de productos perpage
var c1_marginFactor = 51;
var = c1_sss c1_w c1_pp * / / sss = tamaño de paso de diapositivas
c1_ns var = parseInt (((* c1_w c1_n) / c1_sss) + 0.5) / / ns = número de diapositivas
c1_sss + = c1_marginFactor; / / sss slide = tamaño de paso, de 51 años para los márgenes
Requisitos: Mootools 1.2
Ver demo | Descargar Mootools carrusel Con la versión 1.0 de paginación (Descargado 1999 veces)
