Carrossel de formigas CSS e Javascript

Com o advento do CSS3, tornou-se possível fazer animações sem o uso de bibliotecas JS, como, por exemplo, jQuery. A propriedade de transição CSS3 permite alterar sem problemas outras propriedades de um elemento (largura, altura, margem, opacidade etc.), definindo o tempo e a lei da transformação como parâmetros. Eu ofereço um carrossel pequeno, mas bastante funcional, em Javascript puro. Pequena como uma formiga, que é muito menor que uma coruja . Mas com quase os mesmos recursos.

O carrossel de formigas permite:

• mostre um ou mais elementos;
• os elementos podem ser mostrados na forma de uma faixa finita ou infinita (em um loop);
• itens de rolagem automática;
• a navegação é realizada por setas, pontos indicadores ou virar (para telas táteis);
• ajusta automaticamente a qualquer largura da tela.

Colocamos nosso carrossel no arquivo index.html (veja o arquivo de exemplo abaixo):


Os elementos <ul> <li> são usados ​​aqui, mas <div> <div> pode ser usado, se você preferir. Setas e pontos indicadores são posicionados absolutamente nos respectivos contêineres. Para as setas, são utilizados padrões na forma de colchetes triangulares, que, se desejado, você pode substituir por seus padrões ou geração de imagens pelos pseudo-elementos : antes e : depois .

Crie um carrossel com três elementos visíveis e uma largura de 270 pixels. A largura máxima do carrossel é de 810 pixels. Nós incluímos o arquivo CSS:


Colocamos os elementos no container ant-carrossel-list , configuramos a propriedade display: flex e pressionamos todos os elementos na borda esquerda do justify-content: flex-start . A propriedade flex: 0 0 define automaticamente o encolhimento flexível como 0 (o padrão é 1). A rolagem dos elementos do carrossel é realizada usando a propriedade transiton , alterando suavemente o recuo da margem esquerda de zero para a largura do elemento (em uma direção) ou da largura do elemento para zero (na outra direção). Para a função de transformação (rolagem), o valor da facilidade é usado .

Passamos para o programa. Nas opções do programa você pode configurar:

• número de elementos visíveis;
• visualizar elementos na forma de uma fita do primeiro ao último ou em um loop infinito (a fita fecha em um anel);
• rolagem automática ou manual de elementos;
• intervalo de rolagem automática;
• velocidade de animação;
• ativar / desativar elementos de navegação: setas, pontos indicadores, movimento por toque (para telas táteis).

A inicialização do programa começa com o fato de que o número de elementos do carrossel é determinado, os valores iniciais são atribuídos às variáveis ​​internas, os manipuladores de eventos são atribuídos às setas e pontos (se conectados). Se a opção de rolagem automática estiver ativada, são atribuídos manipuladores adicionais que param de rolar quando você passa o mouse sobre os elementos do carrossel. A rolagem por toque é acionada se houver mais de 20 pixels entre o ponto em que o dedo toca na tela e o ponto em que o dedo é arrancado da tela e o tempo total em que o dedo toca na tela é inferior a 80 ms. O autor ainda não possui muita experiência com este carrossel; portanto, os valores fornecidos podem precisar de esclarecimentos. Para uma resposta mais confiável do manipulador de rolagem, a distância entre os pontos pode ser reduzida para 10 ou 15 pixels e o tempo de toque deve ser aumentado para 100 ou 120 ms. O usuário deste carrossel pode corrigir esses valores sozinho depois de adquirir alguma experiência em seu uso.

O algoritmo de rolagem para elementos difere dependendo se a opção de loop está ativada ou não. Se ativada, ao rolar para a direita (função elemPrev ), a propriedade margem-esquerda de toda a linha desses elementos this.crslList diminui de zero para um valor negativo igual à largura do elemento elemWidth . Ao mesmo tempo, o último elemento à direita é clonado e inserido antes do primeiro elemento, após o qual o último elemento é excluído. É atribuída à linha a propriedade 'transição: margem' + opções . velocidade + 'ms facilidade' , em que opções. velocidade é a velocidade da animação, a facilidade é a função de animação. Agora você pode rolar. A propriedade margem esquerda muda suavemente de um valor negativo para zero, a régua inteira muda suavemente para a direita e o último item vem primeiro. Após microssegundos options.speed , a linha recebe o valor anterior 'transição: nenhuma' .

 var elm, buf, this$ = this; elm = this.crslList.lastElementChild; buf = elm.cloneNode(true); this.crslList.insertBefore(buf, this.crslList.firstElementChild); this.crslList.removeChild(elm); this.crslList.style.marginLeft = '-' + this.elemWidth + 'px'; window.getComputedStyle(this.crslList). marginLeft; this.crslList.style.cssText = 'transition: margin '+this.options.speed+'ms ease;'; this.crslList.style.marginLeft = '0px'; setTimeout(function() { this$.crslList.style.cssText = 'transition: none;' }, this.options.speed); 

Se você precisar rolar n elementos ao mesmo tempo, a permutação dos elementos é realizada em um loop n vezes, e a distância da margem esquerda aumenta n vezes.

A rolagem para a esquerda (função elemNext ) ocorre na ordem inversa. Primeiro, a propriedade 'transição: margem' + opções. velocidade + 'facilidade MS' é atribuída à linha this.crslList e a linha rola suavemente para a esquerda ( crslList.style.marginLeft = '-' + elemWidth + 'px' ). Além disso, após microssegundos options.speed , o primeiro elemento é clonado e inserido no final da régua, após o qual o primeiro elemento é excluído. A régua retorna o valor 'transição: nenhuma'. Se você precisar rolar n elementos ao mesmo tempo, o rearranjo dos elementos, como no caso anterior, é realizado n vezes em um loop e a distância da margem esquerda aumenta n vezes.

 var elm, buf, this$ = this; this.crslList.style.cssText = 'transition: margin '+this.options.speed+'ms ease;'; this.crslList.style.marginLeft = '-' + this.elemWidth + 'px'; setTimeout(function() { this$.crslList.style.cssText = 'transition: none;'; elm = this$.crslList.firstElementChild; buf = elm.cloneNode(true); this$.crslList.appendChild(buf); this$.crslList.removeChild(elm) this$.crslList.style.marginLeft = '0px' }, this.options.speed); 

Se a opção de ciclo estiver desativada, nesse caso, não haverá permutações dos elementos e toda a linha de elementos será deslocada como um todo para a esquerda ou direita para seus pontos extremos. A linha de elementos this.crslList propriedade 'transição: margem' + opções. velocidade + 'ms facilidade' é atribuída mesmo quando o carrossel é inicializado e não é mais excluído.

O carrossel é chamado pelo nome da classe ant-carrossel ou pelo identificador. No segundo caso, você pode colocar vários carrosséis em uma página. Um arquivo index.html do carrossel pode ficar assim:

 <!DOCTYPE html> <html lang="ru"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta name="viewport" content="width=device-width; initial-scale=1.0"> <title>Ant-Carousel</title> <!--   --> <link rel="stylesheet" type="text/css" href="ant-files/ant-carousel-styles.css"> </head> <body> … <div class="ant-carousel"> <!--    --> … </div> … <footer> … </footer> <!--   --> <script src="ant-files/ant-carousel. js"></script> <!--   --> <script>new Ant()</script> </body> </html> 

Para colocar vários carrosséis em uma página, é necessário chamá-los por ID. Carrosséis diferentes podem ter um número diferente de elementos.

 <div class="ant-carousel" id=”first”> <!--   --> … <div class="ant-carousel" id=”second”> <!--   --> … <script>new Ant("first"); new Ant("second");</script> 

Todas as imagens são tiradas de fontes abertas.

Obrigado pela atenção!