Html.

Com o desenvolvimento de CSS3, os layouts estão crescendo exponencialmente. Mais e mais funcionais podem ser implementados em CSS "puros". Este post mostra o processo de desenvolvimento. interativo Slider cíclico sem uma única linha JavaScript. Rotação automática, seleção de qualquer deslizamento com uma transição suave - em css "puros". Exemplo em ação

Informação geral.

Padrões e prefixos

Propriedades Transição, animação e transformação foram implementadas há muito tempo em uma ou outra, implementada em todos os navegadores populares. Em 6 de junho de 2012, o W3C anunciou que esta parte do padrão desenvolvido CSS 3.0 não mudaria drasticamente e recomendou para implementá-la a todos os navegadores hoje.

Para desenvolvedores frontais, isso significa a aparência de um padrão para o qual você pode confiar. Agora não é necessário ter medo que, no futuro, qualquer navegador recuse suas propriedades não padrão do prefixo - porque será duplicada por uma propriedade padrão e substituí-la, se necessário.

Desatualizado versão da Internet. Explorer, que em breve será atribuído até à 9ª versão, não suportar a transição, animação e transformar de forma alguma. Mas a sua parte ainda é superior a 10%. O IE7-9 é oferecido pelo JS- "plug", e o efeito da comutação suave entre os slides não é nada.

Por que CSS, não JS?

Existem muitas tarefas que podem ser resolvidas quando ajuda CSS.: Galerias interativas, menus suspensos multi-nível, construção e animação de diagramas tridimensionais ... Por que usar CSS quando você pode fazer tudo em JS, especialmente considerando a massa de desenvolvimentos prontos? Os principais argumentos podem ser tais:

• Na maioria dos casos, Efeitos de CSS. Trabalhe mais rápido, porque eles são seguidos por seus navegadores exclusivamente. Isso é especialmente bem perceptível em dispositivos móveis.
• Para implementar a tarefa, você não precisa de conhecimento JS e em geral quaisquer idiomas de programação. Editar CSS, por via de regra, também está disponível para um usuário comum. E "lenha encantadora" no CSS é muito mais complicada do que em JS.

Vendas

Bem.

Assim, um modificador de elemento de bloco de metodologia (BEM) foi usado para nomear classes CSS. A linha inferior é que o layout é baseado no layout da página de blocos independentes. De acordo com o Bem, o bloco pode ter elementos, mas apenas dentro do bloco.

Classes Slider:
.Slider / * bloco contendo fita de imagem * / .slider__Radio / * Radio Point * / .slider__Item / * slide * / .slider__img / * Imagem dentro do slide * / .slider__number-list / * recipiente com botões de comutação * / .slider__number /. * O botão de inclusão do slide associado * / .slider__number-após / * é incorporado para suportar o IE7 e o IE8, que não suportam pseudo-elementos: depois e :: após, respectivamente * / .slider_count_x / * modificador definindo o número de slides x * /

Animação

A sequência de animação para pessoal chave para três slides se parece com isso:
@KeyFrames Slider__Item-AutoPlay_Count_3 (0% (opacidade: 0;) 10% (opacidade: 1;) 33% (opacidade: 1;) 43% (opacidade: 0;) 100% (opacidade: 0;))
O recurso da implementação do controle deslizante é que todos os slides e todos os botões recebem a mesma animação:
Slider_Count_3 .Slider__Item, slider_count_3 .slider__number-após (-moz-animation: slider__item-autoplay_count_3 15s infinito; -webkit-animation: slider__item-autoplay_count_3 15s infinito; -o-animation: slider__item-autoplay_count_3 15s infinito; animação: Slider__Item-AutoPlay_Count_3 15s infinito ;)
Essa abordagem permite reduzir seriamente a quantidade de código, porque todas as animações ainda precisam duplicá-las com versões de prefixo (@ -webkit-keyframes, @ -moz-keyframes e @ -o-keyframes), e cada uma dessas "pilha" As regras devem ser descritas separadamente para cada um número de slides necessários (pelo cliente). Se você também descrever separadamente a animação para cada slide, o volume do código pode ser dezenas de kilobytes.

Para evitar isso, mas consistentemente anime todos os slides e botões usando uma animação, é suficiente para definir o início da animação a tempo para cada parlamento de pares +:
.Slider__Item: NTH-OF-TYPE (2), .SLIDER__Number: NTH-OF-TYPE (2)\u003e .SLIDE__Number-após (-Mow-Animation-Atraso: 5s; -Webkit-Animation-Atraso: 5s; Atraso de animação: 5s; Animação-Atraso: 5s;) .Slider__Item: NTH-OF-TYPE (3), .SLider__Number: NTH-OF-TYPE (3)\u003e .SLIDE__Number-após (-Mow-Animation-Atraso: 10s ; -Trasão de animação -Webkit: 10s; -O-Animation-Atraso: 10s; Animação-Atraso: 10s;) ...
Para o primeiro par, o valor padrão permanece - zero deslocamento.

Também é importante que o deslocamento não dependa do número de slides e possa ser descrito uma vez por seu valor máximo.

Como resultado, a transição animada suave entre os slides se parece com isso:

Pausa quando pairando o cursor

Para o caso quando o usuário deseja segurar o slide na tela, mas não deseja desligar a rotação, você pode usar um modo de pausa para pairar ao longo do slide:
.SLIDER: HOVER .SLIDER__ITEM ,.SLIDER: HOVER .SLIDE__Number-após (-Moz-animation-play-state: pausado; -Webkit-animation-play-state: pausado; -O-animation-play-state: pausado; animação -Play-State: pausado;)

Mudando para clicar

Há uma série de "eventos" CSS comutáveis elemento HTML.. Se falarmos sobre o clique do mouse, esta é a aparência da pseudo-classe: foco: alvo, ou: verificado em um dos elementos da página. Pseudo-Class: Foco não pode ser mais do que um elemento por página de cada vez; Pseudo-classe: alvo nípede a história do navegador e requer a presença da tag "A"; Pseudo-Class: Verificada lembra a condição antes de deixar a página, mais, no caso de pools de rádio, é um interruptor discreto quando apenas um elemento de um grupo específico pode ser selecionado - o que é necessário.
.Slider__Radio (estilos não selecionados Docks de rádio) .Slider__Radio: verificado (estilos de radiocopters selecionados)

Nos seletores abaixo do nível 4, mude o estado de um elemento arbitrário (por exemplo, uma opacidade do slide) é possível apenas em um pacote com um botão de rádio, com a ajuda dos seletores dos vizinhos + e ~. Você pode mudar os dois estilos do vizinho e os estilos dos descendentes do vizinho, mas em qualquer caso, o vizinho deve ser depois de radiocópteros.
/ * O estilo do primeiro slide é "não selecionado" * / .slider__Radio: NTH-OF-TYPE (1) ~ .SLIDER__ITEM: NTH-OF-TYPE (1) (opacidade: 0,0;) / * O estilo do Primeiro slide no estado "selecionado" * / .slider__Radio: NTH-OF-tipo (1): verificado ~ .slider__Item: NTH-OF-TYPE (1) (opacidade: 1.0;)
A comutação do slide de opacidade é usada, que contém uma imagem. Isso é mais maneira universaldo que trocar propriedades da imagem, porque em um recipiente div, ao contrário de um elemento IMG vazio, pode ser colocado qualquer informação adicional (Por exemplo, o nome do slide ou a descrição associada, incluindo links).
Para slides, as propriedades da transição são indicadas que permitem alternar entre elas suavizadas.
.Lider__Item (-moz-transição: opacidade 0.2s linear; -Webkit-transition: opacidade 0,2s linear; -O-transição: opacidade 0.2s linear; transição: opacidade 0.2s linear;)

Paragem de rotação ao escolher um slide

Quando você seleciona um usuário de qualquer slide, você deve parar a animação de todos os slides e botões. Isto é devido ao fato de que a prioridade dos valores das propriedades da animação em execução estão sempre acima de todos os outros valores das mesmas propriedades (você pode interromper ainda propriedades inline com! IMPORTANTE).

Desde a animação, mesmo que a estrutura seja a mesma, há cada slide, e é necessário desligar a animação de todos os slides (caso contrário transição suave Três slides participarão), todos os canais de rádio devem ser colocados antes do primeiro slide.
...

Além disso, todos os botões (rótulos de botão de rádio) precisam ser agrupados em uma unidade separada e colocados após pools de rádio, caso contrário, os problemas podem surgir com o posicionamento universal de rótulos para um número arbitrário de slides.

Parar a animação de todos os slides e botões ao escolher qualquer slide é definido da seguinte forma:
.Slider__Radio: verificado ~ .slider__item, .slider__Radio: verificado ~ .slider__Number-List\u003e .slider__number-depois (opacidade: 0,0; -MOVAÇÃO - Animação: Nenhum; -Webkit-Animation: Nenhum; -O-Animation: Nenhum; Animação: Nenhum;)

Número arbitrário desliza

Faça um controle deslizante universal sob qualquer número de lâminas é impossível, porque para cada número é preciso sua própria "pilha" CSS-Regras de animação. Cada dessas "pilha" (se descritas) pode ser conectada através do modificador da unidade deslizante:
.slider_count_x.
onde x é o número de slides.

Para apoiar alguns navegadores antigos, o primeiro slide não é animado. Por esse motivo, o contêiner da primeira imagem tem uma opacidade é sempre igual a 1.0. Há um problema: com uma comutação suave de dois outros slides entre si, a primeira é deslocada (isso pode ser pai dos pais do bloco deslizante). Para remover o efeito de transmissão, o atraso de atraso de transição é definido para todos os slides, exceto para o selecionado; Para o índice Z selecionado é instalado mais do que qualquer outra pessoa:
.Slider__Item (opacidade: 1.0; posição: parente; -Moz-transição: Opacidade 0,0S linear 0.2s;-TRANSIÇÃO DEWEBIT: Opacidade 0,0S linear 0.2S; -O-transição: Opacidade 0.0s linear 0.2s; transição: opacidade 0,0S linear 0.2S;) .SLider__Radio: NTH-OF-TYPE (1): verificado ~ .slider__Item: NTH-OF-TYPE (1), .SLIDE__RADIO: NTH-OF-TYPE (2): Checked ~ .SLIDER__ITEM: NTH-OF-TYPE (2), .SLIDER__RADIO: NTH-OF-TYPE (3): verificado ~ .slider__Item: NTH-OF-TYPE (3), .SLider__Radio: NTH-OF-TYPE (4): Checked ~. Slider__Item: NTH-OF-TYPE (4), .Slider__Radio: NTH-OF-TYPE (5): verificado ~ .slider__Item: NTH-OF-TYPE (5) (-moz-transição: Opacidade 0.2s linear; -Webkit transição : Opacidade 0.2s linear; -O-transição: opacidade 0,2S linear; transição: opacidade 0.2s linear; Z-index: 6;)
De modo que os slides não conflitam com outros elementos do site (por exemplo, não se sobrepõem ao menu suspenso com z-índice menor ou igual a 6), crie seu próprio contexto (contexto de empilhamento) para um bloco de conexão que é minimamente necessário para a visibilidade, Z-Index`a:
.SLIDER (Z-index: 0;)

tão

Já hoje, sem habilidades de programação e bibliotecas especializadas, para sua padronização final, o CSS 3.0 permite implementar tarefas complexas e interessantes. O controle deslizante interativo descrito, atualmente, está totalmente operacional em 80% dos usuários de runet. Para a maioria dos usuários restantes, nomeadamente para usuários dos navegadores IE7-9, você pode usar o JS- "plug", que implementa a principal funcionalidade do controle deslizante.

Exemplo de trabalho pode ser visto

3 de março de 2015 às 18:15

Interessante e ao mesmo tempo um slider simples em cSS puro.3

• Desenvolvimento de sites,
• Css,
• Html.

Eu não vou abrir a América para ninguém, eu não vou surpreender o público com um novo foco e não relaxar o cérebro para aqueles que nadam no CSS3 como um aqualant. Eu vou te contar uma maneira simples de criar um controle deslizante usando funções simples CSS3 sem a necessidade de usar o JavaScript.

1. Movimento da Fundação

Para implementar o controle deslizante, precisaremos de um conjunto bastante simples de tags, o que, por sua vez, responderá aos elementos do controle deslizante.

Aqui vemos que o bloco geral "wrapper" contém um bloco "slider" com 5 slides, dentro, o que pode ser colocado qualquer código HTML que esteja localizado no slide. Antes da unidade comum, há botões de rádio, que serão subsequentemente ocultos para criar seu próprio painel de navegação de slides com os quais as etiquetas no bloco de controles nos ajudarão.

2. Fazendo o controle deslizante

Aqui vamos parar e considerar um pouco de CSS. Por favor, note que para algumas propriedades, os prefixos do navegador são afixados a todos navegadores modernos Poderia entendê-los.

* (Margem: 0; Padding: 0; -T -WebKit-box-dimensionamento: caixa de borda; -Moz-caixa-dimensionamento: caixa de borda; -o-caixa-dimensionamento: caixa de border; caixa-dimensionamento: border-box; ) Corpo (fundo-imagem: url (http://habrastorage.org/files/996/d76/d04/996d76d04-996d76d0410d424fa54cc433cc433cocead2a.png);)
Com o design do fundo e estilos compartilhados, tudo está claro.

Wrapper (altura: 350px; margem: 100px auto 0; posição: relativa; largura: 700px;) .slider (cor de fundo: #ddd; altura: herdar; estouro: oculto; posição: largura: herança; -Shasow: 0 0 20px RGBA (0, 0, 0, 0,5); -MOZ-Box-Shadow: 0 0 20px RGBA (0, 0, 0, 0,5); -O-Box-Shadow: 0 0 20px RGBA (0, 0, 0, 0,5); caixa-sombra: 0 0 20px RGBA (0, 0, 0, 0,5);)
A unidade comum e o bloco com um controle deslizante tem as mesmas dimensões para monitorar perfeitamente a posição do controle deslizante na página. Enquanto não há slides, o controle deslizante, temporariamente pintados em cinza claro.

Wrapper\u003e Entrada (exibição: nenhuma;)
Botões de rádio esconder. Nós precisaremos deles mais tarde.

Resultado em este momento tal:

3. Fazendo os slides

Aqui presenciamos estilos comuns para slides e cada slide separadamente:

Slides: Absolute; Largura: herdar;) .Slide1 (fundo-imagem: URL (http://habrastorage.org/files/3f2/628/bd5/3f2628bd58c8452db516195c8452dbc9.jpg);) .slide2 (fundo -imagem: URL : //habrastorage.org/files/3e1/95d/c7f/3e195dc7f49a14f9807f49a14f9807f49a14f97f49a14f97f49a14f97f49a14f97f49a14f97f49a14f97f49a14f97f49a14f97f49a.jpg);). ;) .Slide4 (fundo-imagem: URL (http://habrastorage.org/files/e59/424/c04./e59424c044b015c897d84b015c897d84b015c857E.jpg);). arquivos / 53c / ff6 / c1c / 53cff6c1caf842368c70b8EF892D8402.jpg);)
Para todos os slides, apontamos o posicionamento absoluto para que você possa jogar com os efeitos da aparência. As dimensões dos slides são retiradas do tamanho do controle deslizante para que não sejam prescritos a vários lugares.

4. Fazemos navegação nos slides

Como os botões de rádio estão ocultos e precisamos como interruptores, elaboramos os rótulos preparados:

Wrapper .Controls (esquerda: 50%; margem-esquerda: -98px; posição: Absolute;). Rótulo .Wrapper (cursor: ponteiro; display: bloco inline; Altura: 8px; margem: 25px 12px 0 16px; posição: parente; Largura: 8px; -Webkit-raio-raio: 50%; -moz-raio-raio: 50%; -O-raio-fronteira: 50%; raio de fronteira: 50%;) Etiqueta do .wrapper: após (fronteira: 2px sólido #ddd; conteúdo: "" Exibir: bloco; Altura: 12px; esquerda: -4px; posição: absoluta; topo: -4px; largura: 12px; -Webkit-raio-raio: 50%; -moz-border - Raio: 50%; -O-raio-fronteira: 50%; raio de fronteira: 50%;)
Nós tornamos a navegação clássica. Cada botão é uma área na forma de um círculo, dentro do que, com um slide ativo, uma área vazia é parcialmente pintada. Enquanto isso, temos o seguinte resultado:

5. Aprendemos o botão para clicar

É hora de ensinar o controle deslizante a mudar de slides clicando em um botão específico:

Etiqueta de wrapper (cursor: ponteiro; display: bloco inline; altura: 8px; margem: 25px 12px 0 16px; posição: relativa; largura: 8px; -Webkit-raio-fronteira: 50%; -moz-raio: 50 %; -O-raio-borda: 50%; raio de fronteira: 50%; -Webkit-transition: fundo facilidade-in-out .5s; -moz-transição: fundo facilidade-in-out. Transição: Facilidade de Facilidade de Facilidade .5s; Transição: Facilidade de Facilidade .5s;) ..wrapper Etiqueta: pairar, # Slide1: marcação ~ .Controls: NTH-OF-TYPE (1), # Slide2: Verificado ~ .Controls Rótulo: NTH-OF-TYPE (2), # Slide3: marcada ~ .Controls Etiqueta: NTH-OF-TYPE (3), # Slide4: marcada ~ .Controls Etiqueta: NTH-OF-TYPE (4) # Slide5: marcado ~ .controle: nth-of-type (5) (fundo: #ddd;)
Nos botões de navegação, adicione manchas suaves dentro delas. Também adicione condições em que o botão ativo e o botão no qual o cursor será manchado perfeitamente. Nossos próprios botões de rádio estão prontos:

6. Slider de engenharia

Bem, agora fazemos que os slides finalmente mudou:

Slides (altura: herdeira; opacidade: 0; posição: absoluta; largura: herdeira; z-index: 0; -webkit-transform: escala (1,5); -MOVE-transform: escala (1,5); -o-transform: escala (1.5); transformar: escala (1,5); -Webkit-transition: transformar facilidade ..5s, opacidade facilidade-in-out .5s; -moz-transição: transformar facilidade de facilidade .5s, opacidade facilidade -En-out .5s; -o-transição: transformar facilidade em relação a .5s, opacidade facilidade-in-out ..5s; transição: transformar a facilidade de facilidade .5s, a opacidade facilidade-in-out .5s; ) # Slide1: verificado ~ .slider\u003e .slide1, # slide2: verificado ~ .slider\u003e .slide2, # slide3: verificado ~ .slider\u003e .slide3, # slide4: verificado ~ .slider\u003e .slide4, # slide5:. .Slider\u003e .slide5 (opacidade: 1; z-index: 1; -webkit-transform: escala (1); -MOB-transform: escala (1); -O-transform: escala (1); transformar: escala (1); Transform: escala (um);)
Adicionamos propriedades em estilos de slides comuns, nos quais todos os slides se tornam invisíveis e vão ao fundo. Também adicionamos um ligeiro aumento nos slides, enquanto eles são invisíveis para dar uma aparência interessante no controle deslizante.

O resultado pode ser visto aqui.

Sliders CSS têm alguma vantagem sobre os controles deslizantes em JavaScript. Uma dessas vantagens é a velocidade de download. As imagens não são apenas para sliders são usadas. tamanhos grandes (Se não houver otimização para telas diferentes), também é gasto no download de scripts por algum tempo. Mas no artigo você verá apenas controles deslizantes em CSS puro.

Isso é o que eu encontrei no site sobre o assunto de sliders:

1. CSS3 Slider Images.

Slider no CSS, que usa o botão de rádio desliza para navegar. Estas piscinas de rádio estão sob controles deslizantes. Além disso, além de pools de rádio, a navegação é realizada usando o atirador à esquerda e à direita. Para acompanhar qual imagem é exibida - Pseudo-Escolas são usadas: verificadas.

2. Imagens Slider CSS3 com miniaturas

Ao contrário do controle deslizante passado no CSS, aqui em vez de pools de rádio na parte inferior são as miniaturas de todas as imagens, o que também é conveniente ao criar a galeria de imagens. As imagens são substituídas por um tipo de efeito: suavemente desaparecem ao aumentar.

3. Galeria no CSS

Mas este controle deslizante no CSS é perfeito para vender páginas. Como regra, muitos desenvolvedores da Web no desenvolvimento de empréstimos (páginas de vendas) fazem um controle deslizante no início, para que, na primeira tela (sem rolagem), o visitante imediatamente viu todos os benefícios que está nesta página. Além disso, este controle deslizante é adaptativo, o que também agrada.

4. Slider CSS sem links

Imediatamente eu quero perceber que este controle deslizante não usa links! Por padrão, além da imagem principal (slide), mais 2 slides são visíveis. Eles estão localizados atrás do principal. A mudança de slides ocorre no belo modo: primeiro os dois slides são movidos e o slide se torna o centro, que será então o principal. Então o slide aumenta e colocado à frente do resto.

5. Slider adaptativo no CSS3

Outro controle deslizante adaptativo cujo controle é baseado em radiocopters. Para ver como este controle deslizante vai olhar para dispositivos diferentesah - Você pode alterar independentemente a janela do navegador, ou na página deslizante, há ícones especiais de diferentes dispositivos, clicando em que você verá será um controle deslizante no seu computador, tablet ou em um smartphone.

*** Slider Bonus ***

Além de todos os sliders, que são apresentados acima, quero agradá-lo com outro. Este controle deslizante é perfeito para criar a galeria de imagens. Palavras não explicam o que ele faz, então é melhor assistir tudo no vídeo:

1. Excelente JQuery Slideshow

Uma grande apresentação de slides espetacular usando tecnologias jquery.

2. JQuery "escala carrossel" plugin

Apresentação de slides escalável usando jquery. Você pode definir tamanhos para os slideshows que você mais adequou.

3. JQuery plug "slidejs"

Um controle deslizante de imagens com uma descrição de texto.

4. Plugin "jslidernews"

5. Slider JQuery CSS3

Quando você passa o cursor nas setas de navegação, uma miniatura redonda do próximo slide é exibida.

6. JQuery Slider Bonito "Ciclo de apresentação"

slider jquery. Com indicador de carga de imagem. Há uma mudança automática de slides.

7. JQuery Plugin "Slider Parallax"

Slider com efeito de fundo volumétrico. O destaque deste controle deslizante no fundo do fundo, que consiste em várias camadas, cada uma delas roladas com vários velocidade. Como resultado, acaba imitação do efeito surround. Parece muito bonito, você pode se certificar disso. Mais suavemente é exibido em tais navegadores como: ópera, Google Chrome.Ie.

8. Fresco, Light JQuery Slider "BxSlider 3.0"

Na página de demonstração na seção "Exemplos", você pode encontrar links para todos opções possíveis Use este plugin.

9. JQuery Slider de imagens, plugin "slidejs"

O slider jquery elegante certamente será capaz de decorar seu projeto.

10. JQuery Plugin Slideshow "Easy Slides" v1.1

Fácil de usar o plugin jquery para criar uma apresentação de slides.

11. Plugin "JQuery Slidy"

Easy jquery plugin em vários design. Há uma mudança automática de slides.

12. Galeria JQuery CSS com alteração automática de slides

Se o visitante dentro de um determinado momento não pressionar as setas "Avançar" ou "Voltar", a galeria começará a percorrer automaticamente.

13. JQuery Slider "Nivo Slider"

Plugin de luz de alta qualidade muito profissional com código válido. Existem muitos efeitos diferentes dos slides.

14. JQuery Slider "MobilySlider"

Slider fresco. JQuery Slider com vários efeitos da mudança de imagem.

15. JQuery plugin "slider²"

Slider fácil com mudança de deslizamento automático.

16. Slider fresco JavaScript

Slider com mudança automática de imagem.

Plugin para implementar uma apresentação de slides com uma alteração automática de deslizamento. É possível gerenciar a exibição usando miniaturas de imagens.

jquery css. Slider de imagem usando o plugin NIVOSLIDER.

19. JQuery Slider "JShowoff"

Plugin para girar o conteúdo. Três opções para uso: sem navegação (com deslocamento automático em um formato de apresentação de slides), com navegação na forma de botões, com navegação na forma de imagens.

20. Plugin do portfólio do efeito do obturador

Plugin fresco do jquery para o portfólio do fotógrafo. A galeria implementou um efeito interessante de mudar de imagens. As fotos substituem umas às outras pelo efeito semelhante ao trabalho do obturador da lente.

21. Easy Javascript CSS Slider "Tinyslider 2"

Implementação do controle deslizante de imagens com usando javascript. e CSS.

22. Vento do controle deslizante tinycircheislider

Slider redondo elegante. A transição entre imagens é realizada arrastando o controle deslizante do círculo como um círculo vermelho. Ótimo ajuste em seu site se você estiver em design, use elementos redondos.

23. Slider de imagens em jquery

Easy Slider "Slider Kit". O controle deslizante é representado em vários desenhos: vertical e horizontal. Também implementou vários tipos de navegação entre imagens: usando os botões "Encaminhar" e "Back" usando a roda do mouse, usando o clique do mouse no slide.

24. Galeria com miniaturas "Slider Kit"

Galeria "Kit Slider". A miniatura de rolagem é realizada tanto na direção vertical quanto na horizontal. A transição entre imagens é realizada usando: rodas de mouse, cliques do mouse ou um cursor em miniatura.

25. JQuery Slider Kit Content Slider

Slider vertical e horizontal no jQuery.

26. JQuery Slide Show "Slider Kit"

Slideshow com mudança de corrediça automática.

27. Easy Professional Javascript CSS3 Slider

Um controle deslizante puro em jquery e CSS3, criado em 2011.

slideshow jquery com miniaturas.

29. Simple Jquery Slideshow

Slideshow com botões de navegação.

30. Slideshow chocado jquery "skitter"

jquery plugin "skitter" para criar uma apresentação de slides deslumbrante. O plugin suporta 22 (!) Vista de vários efeitos de animação ao alterar imagens. Pode funcionar com duas opções de navegação para slides: usando números de slides e com miniatura. Certifique-se de olhar para a demonstração, uma descoberta de alta qualidade. Tecnologias usadas: CSS, HTML, JQuery, PHP.

31. Slideshow "desajeitado"

Apresentação de slides funcional. Na forma de slides pode executar: imagens simples, Imagens com assinaturas, imagens com dicas pop-up, clipes de vídeo. Você pode usar setas, links para deslizar números e chaves para a direita / esquerda no teclado para navegar. Slideshow é feito em várias versões: com miniaturas e sem eles. Para ver todas as opções, caminhe ao longo dos links Demo # 1 - Demo # 6 localizado no topo da página de demonstração.

Imagens de deslizantes de design muito originais lembrando o ventilador. Mudança de slide animada. A navegação entre imagens é realizada usando as setas. Ele também fornece uma mudança automática que pode ser ligada e desligada usando o botão Play / Pause localizado no topo.

Slider jquery animado. As imagens de fundo são escalonando automaticamente quando a janela do navegador muda. Para cada imagem flutua um bloco com uma descrição.

34. Slider "Flux Slider" em jQuery e CSS3

Novo controle deslizante jquery. Vários efeitos animados legais ao mudar de slides.

35. JQuery "jswitch" plugin

Galeria jquery animada.

Light Slideshow em jQuery com mudança de corrediça automática.

37. A nova versão do plugin "SlidDeck 1.2.2"

Slider de conteúdo profissional. As opções são possíveis com uma mudança automática de deslizamento, bem como uma opção usando uma roda de mouse para transição entre slides.

38. JQuery Slider "Shodo Slider"

Easy Image Slander no jQuery. Muitas opções de implementação: mudança horizontal e vertical de imagens, com links para o número do slide e sem eles, com assinaturas de imagens e sem vários efeitos da mudança de imagem. Existe uma função da mudança automática de deslizamento. Links para toda a implementação exemplar podem ser encontrados na página de demonstração.

39. JQuery CSS3 Slideshow

Slideshow com miniaturas suporta o modo de deslocamento automático.

40. JQuery "Slider Flux"

Slider com vários efeitos da mudança de imagem.

41. Slider simples jquery

Slider elegante de imagem no jQuery.

Eu quero contar uma maneira simples de criar um controle deslizante, sem usar o JS, com a ajuda da animação CSS.

1) Para começar, você escreverá HTML, suponha que 4 imagens sejam substituídas no controle deslizante.

2) Em seguida, colocamos o tamanho do bloco e mais algumas configurações, posição: relativa é necessária para criar um contexto de formatação, então será claro por que.

Slider (largura: 500px; altura: 300px; margem: auto; margem-topo: 25px; fronteira: 1px preto sólido; posição: relativa; estouro: oculto;)
3) Também definimos algumas propriedades para os próprios lâminas:

Deslize (largura: 500px; altura: 300px; posição: absoluta; top: 0; esquerda: 0;)
Como pode ser visto a partir do CSS, colocamos todos os slides no canto superior esquerdo do controle deslizante, especificando assim a mesma posição de origem.

1. O slide está na posição de origem, é demonstrado pelo usuário.

2. O slide se move para a esquerda até que ele desligue o controle deslizante completamente no exterior (o controle deslizante também é indicado acima, estouro: escondido, respectivamente, o slide não é executado para os objetos circundantes).

5. Slide desce para baixo um nível com um controle deslizante

6. Deslize se move para a posição inicial
Em outras palavras (tiros por enquanto, de acordo com números da lista acima):

@KeyFrames slide (de (top: 0; esquerda: 0;) 1 (Transform: Traduzir (0px, 0px);) 2 (Transform: Traduzir (-500px, 0);) 3 (Transform: Traduzir (-500px, 300px );) 4 (transformar: traduzir (500px, 300px);) 5 (transformar: traduzir (500px, 0);) para (transformar: (0px, 0px)))
5) Então, ficou claro como é o caminho do slide. Cada corrediça "círculos" em torno de seu contêiner é um controle deslizante - e retorna ao original. Assim, podemos infinitamente torcer qualquer número de slides. Mas uma nuance permaneceu, que é a coisa mais importante neste esquema - tempo. É necessário calcular corretamente a narrativa da animação no tempo e definir o atraso correto para cada slide para que não seja todo o animado simultaneamente. Para entender como definir o atraso corretamente e calcular o tempo de animação, fui descrito abaixo.

Vamos levar as designações de passos do ponto anterior e entenderemos o que acontece em cada passo. Em essência, os passos número 1, 2 e 6 são essas etapas em que o slide entra na área visível. Do fato de que os slides devem se mover inextricavelmente e, por assim dizer, empurrar um ao outro do controle deslizante, ele pode concluir-se que a duração das etapas 2 e 6 deve ser igual. Imediatamente faça uma reserva que consegui trabalhar com sucesso este design apenas com a condição de que a duração do primeiro passo seja igual a duração do 2º e 6º. O que acontece durante as etapas de 3,4 e 5 é essencialmente necessidades técnicas, e por simplicidade, vamos unir estas três etapas em 1.

Após a simplificação, temos:

1. Passo - o controle deslizante é demonstrado na fonte
2. Passo - o controle deslizante muda para a direita
3. Passo - Slider faz movimentos técnicos
4. Passo - o controle deslizante muda para a esquerda, retornando à posição inicial

Para garantir um incidente para os slides, no momento em que o slide inicia a etapa 2, o próximo slide deve começar a etapa 4.

Se o tempo, o círculo de toda a animação é T;
Número de slides - n;
Duração 3 passos - y;
A duração das etapas é de 1,2 e 4 - x;
Etapa de atraso de animação para N-Slide - Z;
Então:

Y \u003d (100 * n - 150) / n;
x \u003d (100 - y) / 3;
x e y devem ser traduzidos em juros e, em seguida,:
z \u003d 2 * x * t;

Para o caso quando n \u003d 4, como no exemplo acima, recebemos:

3º pitch - 62,5%, 1, 2 e 4º - 12,5%. Um passo de atraso de animação para cada slide subseqüente - 25%.

Quais intervalos serão entre os estágios dentro da terceira etapa - não importa.

6) Agora que todos nós contamos e sabemos que todos os valores podem receber o código final.

Animação:

@KeyFrames Slide (de (top: 0; esquerda: 0;) 12,5% (Transform: Traduzir (0px, 0px);) 25% (Transform: Traduzir (-500px, 0);) 36% (Transform: Traduzir: Traduzir: Traduzir (- 500px, 300px);) 37% (Transform: Traduzir (500px, 300px);) 87,5% (Transform: Traduzir (500px, 0);) para (transformar: (0px, 0px))
Slides:

Slide1 (Background: URL (1.JPG); Animação - Atraso: 7.5s;) .SLIDE2 (Background: URL (2.JPG); Animação - Atraso: 5s;) .SLIDE3 (Background: URL (3.JPG); Atraso de animação: 2.5s;) .Slide4 (fundo: URL (4.JPG); Animação - atraso: 0s;)
CSS Geral para todos os slides:

Slide (Largura: 500px; Altura: 300px; posição: Absolute; Top: 0; Esquerda: 0; Animação-Nome: deslizante; Animação-duração: 10s; Função de cronometramento de animação: Linear; Animação-contagem de iteração: infinita; )
Aqui, na verdade, tudo! Graças a todos que leram até o fim.