Com uma variedade de carrosséis lá fora, muitos para Mootools também, eu ainda decidi escrever minha própria classe Carousel, por algumas boas razões
1. Espontânea um recurso de paginação (para ser capaz de saltar um slide particular / passo no carrossel).
2. Desejavam a liberdade com a colocação dos botões ESQUERDA e DIREITA / links, onde quer que eu por favor.
3. Mais controle sobre os passos de slides.
Eu consegui criar um novo carrossel, com as características acima ... como abaixo ... Sinta-se livre para sugerir as modificações que exijam!
Meu exemplo parecido com este ... [ Ver Demo ]
Veja o Demo | Download de Mootools carrossel com paginação Versão 1.0 (baixado 2006 vezes)
1. Paging Carousel
Você pode facilmente adicionar a paginação para o carrossel, simplesmente definindo o sinalizador de paginação, que é parater última passou ao criar a instância do MooCarousel a verdade (quer paginação) ou falso (donot querendo paginação).
var carousel1 = new MooCarousel ('carousel1_wrapper', 'carousel1_items_container', 'carousel1_moveleft', 'carousel1_moveright', c_ns, c_sss, true); / / ns = número de slides, sss = tamanho do passo de slides
E claro que você pode mudar o look-n-feel destes achors de paginação que você queira, modificando o seu CSS.
. Carousel_paging {text-align: right; margin: 5px 10px 0 0;}
. Carousel_paging atual, página carousel_paging {outline: none; width:... 15px; height: 15px; line-height: 15px; text-align: center; display: block; float: left; background: # D8D8EB; margin: 0 0 0 1px; text-decoration: none;}
. Carousel_paging a: hover, carousel_paging atual {background: # 4D4D9B; color: # ffffff;}..
Bem! há um pequeno problema, porém, as âncoras de paginação se definido, então ele vai ficar sempre gerado depois que o componente do carrossel. Eu queria torná-lo dinâmico, bem como, mas apenas para manter o Script para soprar as proporções, eu decidi ignorá-lo.
Mas você sabe um pouco de JavaScript, você pode facilmente modificar o código de geração de paginação na classe MooCarousel para agradar às suas necessidades.
2. Personalizar os ícones de esquerda e direita
Você pode alterar o posicionamento, imagens ou qualquer propriedade displat dos botões esquerdo e direito simplesmente por brincar com o CSS. ser capaz de alterar as colocações dos buttoms Esquerda e Direita foi o motivo real para mim o meu direito Classe nosso carrossel.
Uma vez que esta classe MooCarousel, aceita o ID é um desses botões, você pode realmente colocar os botões em qualquer lugar da página, por favor ... não tem que ser na hierarquia 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 Passos de slides
O que quero dizer MEUS PASSOS SLIDE Personalização?
A maioria dos Carrosséis deslize o total com a janela visível. Então, dizer que você tinha quatro itens (como no meu exemplo acima), ele coloca todos os quatro itens. Com este componente Carrossel, Você passa o número de slides eo tamanho do passo de sua escolha.
var carousel1 = new MooCarousel ('carousel1_wrapper', 'carousel1_items_container', 'carousel1_moveleft', 'carousel1_moveright', c_ns, c_sss, true);
c_ns = número de slides, c_sss = tamanho do passo de slides
Além disso, na minha example1 eu calcuted o tamanho do passo slide, baseado na lógica em que, eu sei que número de itens, a largura em cada item e as margens que deram depois de cada item no meu CSS.
/ * Para bacanal 1 * /
var c1_w = 92; Largura Item / farra /
var c1_n = 10; / Número / Total de Itens farra Comparação
var c1_pp = Número 4 / / Comparação de perpage Itens bacanal
var c1_marginFactor = 51;
var c1_sss = c1_w * c1_pp / / sss = tamanho do passo de slides
var c1_ns = parseInt (((* c1_w c1_n) / c1_sss) + 0,5) / / NS = número de slides
c1_sss + = c1_marginFactor / / sss = tamanho do passo de slides, 51 para as margens
Requisitos: Mootools 1.2
Veja o Demo | Download de Mootools carrossel com paginação Versão 1.0 (baixado 2006 vezes)
