Con unha variedade de carrosséis aí fóra, moitos para Mootools tamén, eu decidín escribir a miña propia clase Carousel, por algunhas boas razóns
1. Espontánea un recurso de programación (para poder ir unha foto particular / paso no carrusel).
2. Desexaban a liberdade coa colocación dos botóns esquerda e dereita / enlaces, onde queira que eu por favor.
3. Máis control sobre os pasos de diapositivas.
Eu conseguir crear un novo carrusel, coas características anteriormente ... como a continuación ... Sinto-se libre para suxerir as modificacións que requira!
O meu exemplo coma este ... [ Ver Demo ]
Vexa o Demo | Descargar Mootools carrusel con paxinación Versión 1.0 (baixo 1989 veces)
1. Paging Carousel
Pode facilmente engadir a programación para o carrusel, simplemente definindo o sinalizador de paxinación, que é parater última pasou ao crear a instancia do MooCarousel a verdade (é paxinación) ou falso (donot querendo programación).
var carousel1 = new MooCarousel ('carousel1_wrapper', 'carousel1_items_container', 'carousel1_moveleft', 'carousel1_moveright', c_ns, c_sss, true); / / s = número de diapositivas, SSS = tamaño do paso de diapositivas
E claro que pode cambiar o look-n-feel destes achors de paxinación que queira, modificando o seu CSS.
. Carousel_paging {text-align: right; Margin: 5px 10px 0 0;}
. Carousel_paging actual, páxina carousel_paging {outline: none; width: ... 15px; height: 15px; line-height: 15px; text-align: center; Mostrar: block; float: left; background: # D8D8EB; Margin: 0 0 0 1px; text-decoration: none;}
. Carousel_paging a: hover, carousel_paging actual {background: # 4D4D9B; color: # ffffff;} ..
Ben! hai un pequeno problema, porén, as áncoras de paxinación se definido, polo que se ve sempre xerado despois de que o compoñente do carrusel. Eu quería facelo dinámico, así como, pero só para manter o Script para soprar as proporcións, eu decidir ignore-lo.
Pero vostede sabe un pouco de JavaScript, pode facilmente modificar o código de xeración de programación na clase MooCarousel para agradar ás súas necesidades.
2. Personalizar as iconas de esquerda e dereita
Pode cambiar o posicionamento, imaxes ou calquera propiedade displat dos botóns esquerdo e dereito simplemente por xogar con CSS. poder cambiar as colocacións dos buttoms esquerda e dereita foi a razón real para min o meu dereito Clase noso carrusel.
Unha vez que esta clase MooCarousel, acepta o ID é un deses botóns, pode realmente colocar os botóns en calquera lugar da páxina, por favor ... non ten que ser na xerarquía de elementos, como no meu exemplo.
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. Personalizar Pasos de diapositivas
O que quero dicir meus pasos foto Personalización?
A maioría dos carrosséis mova o total coa fiestra visible. Entón, dicir que tiña catro elementos (como no meu exemplo anterior), pon todos os catro elementos. Con este compoñente Carrossel, Vostede pasa o número de diapositivas eo tamaño do paso da súa elección.
var carousel1 = new 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 do paso de diapositivas
Ademais, na miña example1 eu calcuted o tamaño do paso foto, baseado na lóxica en que, sei que número de elementos, o ancho de cada elemento e as marxes que deron despois de cada elemento no meu CSS.
/ * Para bacanal 1 * /
var c1_w = 92; Ancho Elemento / farra /
var c1_n = 10; / Número / Cantidade de elementos farra Comparación
var c1_pp = Número 4 / / Comparación de perpage Elementos bacanal
var c1_marginFactor = 51;
var c1_sss = c1_w * c1_pp / / SSS = tamaño do paso de diapositivas
var c1_ns = parseInt (((* c1_w c1_n) / c1_sss) + 0,5) / / NS = número de diapositivas
c1_sss + = c1_marginFactor / / SSS = tamaño do paso de diapositivas, 51 para as marxes
Requisitos: Mootools 1.2
Vexa o Demo | Descargar Mootools carrusel con paxinación Versión 1.0 (baixo 1989 veces)
