Expressá-la

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. Procuro liberdade com posicionamento dos botões ESQUERDA e DIREITA / links, onde quer que eu queira.
3. Mais controle sobre os passos de slides.

Eu consegui criar um carrossel novo, 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 1985 vezes)

1. Paging Carousel

Você pode facilmente adicionar a paginação para o seu carrossel de, simplesmente definindo o sinalizador de paginação, que é parater última passada durante a criação da 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 um: hover, carousel_paging corrente {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.
Desde 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 diga que teve quatro itens (como no meu exemplo acima), ele coloca todos os quatro itens. A esse 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 bacanal 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 Paging Versão 1.0 (baixado 1985 vezes)