HTML5 Slider Adaptive. Como fazer um controle deslizante adaptativo no CSS3? Slider adaptativo no CSS3

Um de maneiras eficazes Atrair a atenção dos usuários na página do site é a criação de uma animação em movimento. Elementos de animação ajudam mais claramente nos informar e mostrar aos usuários sobre o seu produto. A última vez, os painéis viajantes estavam ganhando grande popularidade, bem como vários outros efeitos que aparecem ao rolar ou pressionarem a imagem. Eles também são conhecidos como sliders, carrosséis e saindo de painéis. Este artigo discute a criação de um controle deslizante de carrossel adaptativo, com um efeito suave do contrato automático.

Hoje, a rede contém centenas de comentários com referências a soluções prontas, no entanto, a maioria deles contém muitas funções não utilizadas que reduzem significativamente o desempenho do controle deslizante, além de desacelerar o carregamento do site como um todo. Os desenvolvedores profissionais da Web sempre procuraram criar flexíveis na configuração produtos de software., com um baixo limite de bibliotecas e plugins adicionais. É por isso que o trabalho do nosso script envolve requisitos mínimos para organizar esse controle deslizante. A funcionalidade do trabalho permite que você defina o intervalo de comutação, a velocidade, assim como a seleção de um slide específico. Abaixo está uma linha de permanente, regulando o trabalho do próprio controle deslizante.

timelecist. - Slide Switching Speed

Timeview. - Tempo mostrado

Radiobut. - botões sob o slide, para navegação rápida. Por padrão, valor verdadeiro, se estiver usando false, os botões desaparecerão.

E agora vamos começar! Crie e abra o arquivo index.htm.

No código enviado, como não vemos nada complicado, envoltório deslizante. Determina em geral E linhas o controle deslizante no meio da tela. Parâmetro slide ativo. Define o tamanho e a altura da imagem de acordo com o seu comprimento. E deslizante. Mostra apenas uma imagem ativa.

Agora crie e abra o arquivo. estilo.css. e chorando a marcação que precisamos:

@Import URL ("https://fonts.googleapis.com/css?family\u003dOpen+sans|roboto"); Corpo (cor: # 4f4f5a: "Roboto", sans-serif; tamanho: 16px; preenchimento: 0; margem: 0;) # envoltório deslizante (largura máxima: 800px; margem: 0 auto; Margin-Top: 80px;) # Slide ativo (largura: 100%; exibição: tabela; posição: relativa; estouro: oculto; -Webkit-user-select: nenhum; -Moz-user-select: nenhum; User-Select: Nenhum; -O-USER-SELECT: Nenhum; user-select: nenhum;) #slider (posição: relativa; largura: Calc (100% * 4); top: 0; margem: 0; PADDING: 0; -Webkit-transition: 1s; -o-transição: 1s; transição: 1s; -Webkit-timing-timing-timing-timing-timing-timing-timing-timing-timing-timing-timing-timing-timing-timing-timing-timing-timing-timing-timing-timing-timing-timing: facilidade-in-out; -O-função de temporização: facilidade -out; função de temporização de transição: facilidade-in-out;) .Slide (largura: Calc (100% / 4); estilo de lista: nenhum; exibir: inline; float: esquerda;) .SLIDE IMG (largura: 100%;) botão .Radio (margem-superior: 10px; alinhamento de texto: centro;) .Radio-mas .ctrl-Select (margem: 2px; display: bloco inline; largura: 16px; Altura: 16px; : escondido; travessão de texto: -9999px; fundo: URL (Radiobg.p Ng) fundo central sem repetição; ) .Radio-mas .Ctrl-Select: Hover (cursor: ponteiro; fundo-posição: centro central;) .Radio-mas .ctrl-select.activeve (posição de fundo: parte superior central;) #prewbutton, #nextButton : bloco; largura: 40px; altura: 100%; posição: absoluta; topo: 0; Overflow: escondido; travessão de texto: -999px; fundo: URL ("arrowbg.png") Centro esquerdo; opacidade: 0,5 ; z-index: 3; contorno: nenhum! Importante;) #prewButton (esquerda: 10px;) #NextButton (direita: 10px; fundo: URL (arrowbg.png) Centro direito não-repete;) #prewbutton: pairar, # NextButton: Hover (opacidade: 1;)

No estilo de estilo envoltório deslizante. Propashite largura – comprimento máximo Suas fotos.

No estilo de estilo #Slider (largura: calcete (100% * 4);) e .Slide (largura: Calc (100% / 4);) Especifique o número de fotos no seu controle deslizante. Em nosso exemplo, eles são 4.

Se as setas para frente / voltar para a visibilidade do seu controle deslizante podem ser feitos invisíveis e aparecerão quando você passar o piso. Para fazer isso em parâmetros prewbut. e nextBut., Defina o valor da propriedade de opacidade 0.

Agora crie e abra nosso arquivo. slider.Js.em que haverá um código deslizante. Não se esqueça de conectar a biblioteca do jQuery.

$ (Documento) .REady \u003d 700; var timoview \u003d 5000; var radiobut \u003d true; var slidenum \u003d 1; var slidetime; slidecount \u003d $ ("# slider .slide"). Comprimento; Var animslide \u003d função (Cleartimeout) (SlideTime); IF (Seta \u003d\u003d "Next") (se (Slidenum \u003d\u003d Slidecount) (Slidenum \u003d 1;) mais (Slidenum ++) translateWidth \u003d - $ ("# slide ativo"). (Slidenum - 1); $ ("# slider"). CSS (("transformar": "Traduzir (" + translatewidth + "px, 0)") ");) mais se (seta \u003d\u003d" Prew ") (se (Slidenum \u003d\u003d 1) (Slider \u003d Slidecount;) mais (Sliderum- \u003d 1) translatewidth \u003d - $ ("# slide ativo"). Largura () * (Slidenum - 1); $ ("" #slider "). CSS (("Transform": "Traduzir (" + translatewidth + "px, 0)") "));) mais (slidenum \u003d seta; translatewidth \u003d - $ (" # slide ativo "). Largura () * (Slidenum - 1); $ ("# slider"). CSS (("Transform": "Traduzir (" + translatewidth + "px, 0)");) $ (". Ctrl-select.active.active") .Removeclass (". Ativo "); $ (". Ctrl-Select "). EQ (Slidenum - 1) .addclass (" ativo ");) if (Radiobut) (Var $ Linkarrow \u003d $ ("<>") .Prependto (" # Active-slide "); $ (" # NextButton "). Clique em (Função (); retorne false;)) $ (" # prewbutton "). Clique em (Função () "); Retornar falso;))) Var AddersPan \u003d" "; $ (" slide "). Cada (função (índice) (Adderspan + \u003d" "+ index +""; }); $("

"+ AddersPan +"

") .Appendto (" # slider-wrap "); $ (". Ctrl-Select: primeiro "). addclass (" ativo "); $ (" ctrl-select "). Clique em (função (Var Gotonum \u003d Parsefloat ($ (isto) .Text ()); animslide (gotonum + 1);); var pausa \u003d false; var rotator \u003d função () (if (! pausado) (slidetime \u003d settsimeout (função () Próximo "), Timeview);)) $ (" # slider-wrap "). Passe (função (); pausa \u003d true;), função () (pausa \u003d false; rotador ();); var clicando \u003d FALSE; VAV PrevX; $ (". Slide"). MouseDown (função (e) (clicando \u003d true; PrevX \u003d e.clientx;); $ (". Slide"). MouseUp (Função (clicando \u003d False ;)); $ (documento) .mouseup (função () (clicando \u003d false;)); $ ("slide"). MouseMove (função (e) (clicando \u003d\u003d true) (se (e.clientx< prevX) { animSlide("next"); clearTimeout(slideTime); } if(e.clientX > PrevX) (animslide); Cleartimeout (SlideTime);) Clicar \u003d Falso; )))); $ (". Slide"). Hover (). CSS ("cursor", "ponteiro"); Rotador (); ));

Função animslide. Execute três tipos de valores: Em seguida, Prew, valor numérico. O próximo parâmetro muda o seguinte slide, Prew retorna o anterior, e o valor numérico é um slide definitivamente especificado selecionado através dos botões de slide de rádio.

O controle deslizante apresentado usou imagens do recurso web https://pixabay.com/.

Se você precisar adicionar um controle deslizante jQuery de alta qualidade ao seu site, então neste artigo você encontrará uma descrição dos plugins necessários. Apesar do fato de que o jQuery tiver um trabalho significativamente simplificado com JavaScript. Ainda precisamos de plugins para acelerar o processo de criação de um design web.

Podemos fazer alterações em alguns desses plugins e criar novos controles deslizantes muito mais atendem as tarefas do nosso site.

Para outros sliders, basta adicionar manchetes, imagens e selecione os efeitos para alterar os slides que vêm com um controle deslizante. Todos esses plugins são acompanhados por documentação detalhadaPortanto, adicione novos efeitos ou funções para eles não serão muita dificuldade. Você pode até mudar os gatilhos dependendo dos eventos, se você é um programador experiente jQuery.

Tendências recentes, como design adaptativo, são muito importantes para projetos da web, independentemente de você implementar um plugin ou script. Todos esses elementos tornam cada um desses plugins muito flexíveis. Tudo o que aconteceu em 2014 está incluído nesta lista.

JQuery-Sliders Images

Jssor Responsive Slider.

Recentemente, me deparei com este jQuery funcional - esculso, e eu poderia convencer o primeiro a ter certeza de que ele lida com o seu trabalho muito bem. Ele contém possibilidades ilimitadas que podem ser expandidas à custa de um código-fonte aberto do controle deslizante:

Design adaptativo;
Mais de 15 configurações;
Mais de 15 efeitos da mudança de imagem;
Galeria de imagens, carrossel, suporte para tamanho completo;
Banners rotor verticais, lista de slides;
Suporte de vídeo.

Demo | Download

PGWSLIDER - JQuery Adaptive / Zepto-baseado em controle deslizante

A única tarefa deste plugin é demonstrar slides de imagens. É muito compacto, já que o tamanho dos arquivos JQuery é de apenas 2,5 kb, que permite carregá-lo muito rapidamente:

Layout adaptativo;
Otimização de SEO;
Suporte com diferentes navegadores;
Transições de imagem simples;
O tamanho do arquivo é de apenas 2,5 kb.

Demo | Download

JQuery Vertical News Slider

JQuery-Slider flexível e útil, projetado para recursos de notícias com uma lista de publicações no lado esquerdo e conclusão da imagem à direita:

Design adaptativo;
Coluna de comutação de notícias verticais;
Manchetes estendidas.

Demo | Download

Slider de Wallop.

Este controle deslizante não contém jquery, mas gostaria de apresentá-lo, pois é muito compacto e permite reduzir significativamente o tempo para baixar páginas. Deixe-me saber se você gosta disso:

Layout adaptativo;
Design simples;
Várias opções para mudança de slides;
Código mínimo de JavaScript;
O tamanho de apenas 3kb.

Demo | Download

Galeria de polaroid em estilo simples

Galeria no estilo espalhado na mesa de documentos com um layout flexível e design bonito Deve interessar muitos de vocês. Mais adequado para tablets e grandes exibições:

Slider adaptativo;
Design plano;
Mudança aleatória de slides;
Acesso total ao código-fonte.

Demo | Download

Um controle deslizante.

Demo | Download

Histlider - HTML5, JQuery e WordPress Slider Image

O Histlider introduziu um novo plugin Livre JQuery Slider, com o qual você pode criar uma variedade de imagens de galeria com transições fantásticas:

Slider adaptativo;
Não requer conhecimento de programação;
Vários modelos e peles incríveis;
Belos efeitos de transição;
Suporte para diferentes plataformas;
Compatibilidade com WordPress, Joomla, Drupal;
A capacidade de exibir conteúdo de diferentes tipos: imagens, vídeos do YouTube e Videa Videa;
Ajuste flexível;
Funções adicionais úteis;
Volume ilimitado de conteúdo exibido.

Demo | Download

Wow slider.

Wow slider is slider Adaptive jquery. Imagens com incrível efeitos visuais (domino, gire, desfoque, golpe e flash, partida, persianas) e modelos profissionais.

Wow Slider vem com o Assistente de Instalação, que permite criar deslizantes fantásticos em questão de segundos sem a necessidade de entender o código e editar imagens. Também disponível para baixar a versão do plug-in Joomla e WordPress:

Totalmente adaptável;
Suporte para todos os navegadores e todos os tipos de dispositivos;
Suporte para dispositivos sensoriais;
Instalação simples no WordPress;
Flexibilidade na configuração;
Seo-otimizado.

Demo | Download

Slider Nivo - Free JQuery-plugin

O Slider Nivo é conhecido pelo mundo inteiro como o mais lindo e fácil de usar o controle deslizante de imagem. O plugin do Slider do Nivo é gratuito e é lançado sob a licença do MIT:

Jquery 1.7 e acima;
Belos efeitos de transição;
Simples e flexível na configuração;
Compacto e adaptativo;
Código aberto;
Poderoso e simples;
Vários modelos diferentes;
Aparto automático de imagem.

Demo | Download

Slider JQuery simples com documentação técnica

A ideia foi inspirada por sliders da Apple em que vários pequenos elementos podem voar com diferentes efeitos de animação. Os desenvolvedores tentaram incorporar esse conceito em relação a requerimentos mínimos Para criar um design simples da loja online, em que os elementos "partida" são diferentes categorias:

Layout adaptativo;
Design minimalista;
Vários efeitos de perda e turnos de slides.

Demo | Download

Slider JQuery de tamanho completo

Um controle deslizante muito simples que ocupa 100% da largura da página e ajustando-se ao tamanho das telas de dispositivos móveis. Funciona com transições CSS, e as imagens "se encaixam" com os animais. A âncora pode ser substituída ou excluída se você não quiser ligar um link para a imagem.

Ao instalar, o controle deslizante se desdobra na largura de 100%. Ele também pode reduzir automaticamente o tamanho das imagens de slides:

Jquery adaptativo -slider;
Tamanho completo;
Design minimalista.

Demo | Download

Slider de conteúdo elástico + tem

O Slidener de conteúdo elástico ajusta automaticamente a largura e a altura, dependendo do tamanho do elemento pai. Este é um simples controle deslizante jquery. Consiste em uma zona de deslizamento acima e os painéis da guia de navegação na parte inferior. O controle deslizante ajusta sua largura e altura de acordo com o tamanho do contêiner pai.

Ao visualizar nas pequenas telas diagonalmente, as guias de navegação são transformadas em ícones pequenos:

Design adaptativo;
Role com um clique do mouse.

Demo | Download

Free 3d Stack Slider

Slider experimental, passeando imagens em 3D. Duas pilhas se assemelham a pilhas de papel, a partir do qual a rolagem da imagem é exibida no centro do controle deslizante:

Design adaptativo;
Transformação flip;
Efeitos 3D.

Demo | Download

Slider FullScreen Slits baseado em JQuery e CSS3 + Manual

No manual, você aprenderá como criar um controle deslizante com um destaque: A ideia é "cortar" e exibir o slide atual neste formulário, enquanto você abre a imagem a seguir ou anterior. Usando jquery e css - animação, podemos criar efeitos de transição exclusivos:

Design adaptativo;
Transição dividida;
Slider completo.

Demo | Download

Unislider - muito pequeno controle deslizante jquery

Nenhum fole desnecessário e marcação, tamanho inferior a 3kb. Use qualquer código HTML para seus slides, expanda-o com usando CSS. . Tudo relacionado a Unslider está localizado no GitHub:

Suporte para vários navegadores;
Suporte de teclado;
Ajuste de altura;
Design adaptativo;
Suporte para entrada sensorial.

Demo | Download

Slides mínimos responsivos.

Plugin simples e compacto ( tamanho de apenas 1 kb), que cria um controle deslizante adaptativo usando elementos dentro do recipiente. ResponsiveLides.js Works S. grande quantidade navegadores, incluindo todas as versões do IE do IE6 e acima:

Totalmente adaptável;
Tamanho 1 KB;
CSS3 transições com a possibilidade de inicialização via javascript;
Marcação simples usando uma lista marcada;
Capacidade de configurar os efeitos das transições e uma duração de visão de um slide;
Suporta a capacidade de criar vários slideshows;
Rolagem automática e de mão.

Demo | Download

Câmera - Free JQuery Slider

A câmera é um plugin com uma infinidade de efeitos de transição, um layout adaptativo. Simples na configuração, suportado por dispositivos móveis:

Design totalmente adaptativo;
Assinaturas;
A capacidade de adicionar vídeo;
33 ícones de cores diferentes.

Demo | Download

Slidescle, plugin adaptativo jquery

O SlidesJS é um plugin adaptativo para jquery (1.7.1 e superior) com suporte para dispositivos sensoriais e transições CSS3. Experimente com ele, tente vários exemplos prontos que o ajudarão a descobrir como adicionar slidesces ao seu projeto:

Design adaptativo;
Css3 -producimentos;
Suporte para dispositivos sensoriais;
Simples na configuração.

Demo | Download

BX JQuery Slider.

Este é um slider de jquery adaptativo gratuito:

Totalmente adaptável - ajusta-se a qualquer dispositivo;
Mudança horizontal, vertical de slides;
Slides podem conter imagens, vídeo ou html -content;
Suporte estendido para dispositivos sensoriais;
Usando transformações CSS para animação de slides ( aceleraçao do hardware);
API de retorno de chamada e integralmente públicas;
Pequeno tamanho de arquivo;
Fácil de implementar.

Demo | Download

Flexslider 2.

O melhor controle deslizante adaptável. Uma nova versão. Finalizou-se para aumentar a velocidade do trabalho, compacidade.

Demo | Download

Galleria - Galeria de fotos adaptativas baseada em JavaScript

A Galleria é usada em milhões de sites para criar uma galeria de imagens em alta qualidade. O número de comentários positivos sobre seu trabalho simplesmente rola:

Totalmente livre;
Modo de visualização de tela cheia;
100% adaptativo;
Não requer experiência de programação;
Suporte iPhone, iPad e outros dispositivos de toque;
Flickr, Vimeo, YouTube e muito mais;
Vários tópicos.

Demo | Download

Mirtilo - slider simples adaptativo jquery image

Eu apresento a você um controle deslizante jquery de imagens, escrito especificamente para design web adaptativo. O Blueberry é um plugin experimental de um controle deslizante de imagem de código aberto, que foi escrito especificamente para trabalhar com modelos adaptativos.

4 de novembro de 2019 A gravação foi atualizada

Yury alemão

Sliders no Slider Pure CSS + Bonus

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. Slider de imagem CSS3

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. Slider Miniature CSS3

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 em 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:

Resultado

Com a ajuda de sliders, você pode projetar lindamente galerias de imagem colocando-as mais compactamente, inserir um controle deslizante na primeira tela (parte da página visível sem scrolling) vendendo uma página para mostrar imediatamente os visitantes dos principais benefícios que ele irá receber. Você ainda pode encontrar muita maneira onde você pode aplicar sliders, mas uma coisa é clara exatamente - elas são benéficas com o uso adequado.

Pontos que foram revisados \u200b\u200bno artigo.

Olá a todos. Slider muito legal, quero apresentar a sua atenção. OOO ... Eu olho para você esqueci completamente sobre mim. Sim, sim, eu já fui embora, provavelmente por seis meses ou por ano e eu absolutamente não sei como fazer-se sair todos os dias no artigo (embora seja completamente real). Bem, ok, não sobre este assunto agora. O controle deslizante é fornecido por Tympanus Codrops e trabalha em HTML5, CSS3 e TheEnmax.js.

O controle deslizante não está girando para a esquerda direita e não de cima para baixo, mas na diagonal. As setas de navegação estão localizadas no canto superior esquerdo e no canto inferior direito. Além disso, a navegação é realizada pressionando o prevni à direita e à esquerda. Toda a animação é muito suave e funciona bem em todos navegadores modernos. Cada elemento individual do controle deslizante tem sua própria página que se abre quando pressiona. A página tem uma foto, título e texto.

O controle deslizante é perfeito para a galeria, o portfólio do artista, o fotógrafo, o escultor, em suma, qualquer pessoa que esteja envolvida em atividades criativas e ele tem as obras que ele quer mostrar no site. Uma galeria no local do museu, a exposição ficará bem.

Conectando a galeria

Conecte a galeria não será difícil

Baixar arquivos

Primeiro você só precisa baixar fontes do meu site para um link direto. Do arquivo você precisa derramar na raiz do site da pasta IMG, CSS e JS

Conecte os arquivos CSS e JS

Em seguida, conecte scripts e estilos. Estilos são conectados adicionando para tag Próximo código

e scripts pela página para a tag de fechamento

Adicione um controle deslizante ao site

Primeiro, adicione navegação ao topo do site

e depois o controle deslizante

Memórias e pensamentos.

Automação

Vagão aleatório

Máquinas.

Palavras arbitrárias.

COEXISTÊNCIA

O único guia é o seu coração

Deriva assombrada.

Bellamio.

Diversão divergem

Pastagens.

Esperanças e sonhos.

Foco.

Automação

Uma árvore precisa ser sua amiga se você vai pintá-lo

Apenas deixe isso acontecer. Nós apenas deixamos isso fluir para fora de nossas mentes. Apenas relaxe e deixe fluir. Tão fácil. Vamos colocar algumas pequenas nuvens felizes em nosso mundo. É uma imagem muito fria, eu posso ter que ir pegar meu casaco. Está prestes a se congelar até a morte. Isso vai ser um pouco feliz seascape. Vamos lá aqui e começar a se divertir o mínimo possível. Trabalhe uma coisa de cada vez. Não se levante - temos muito tempo. Coloque seus sentimentos nele, seu coração, é seu mundo. Essas árvores são muito divertidas. Eu começo neles e tenho dificuldade em parar.

Máquinas.

Esta é provavelmente a maior coisa a acontecer na minha vida

Nós não estamos tentando toach uma coisa para copiar. Nós estamos aqui apenas para você uma técnica, então deixa você perder o mundo. Agora, nós vamos flufar essa nuvem. Nós não temos nada além de árvores felizes aqui. Vamos fazer isso de novo. Use o que você vê, não planeje isso. Vamos lá aqui e começar a se divertir o mínimo possível. Trabalhe uma coisa de cada vez. Não se levante - temos muito tempo. Coloque seus sentimentos nele, seu coração, é seu mundo. Essas árvores são muito divertidas. Eu começo neles e tenho dificuldade em parar.

COEXISTÊNCIA

O único guia é o seu coração

Vamos lá aqui e começar a se divertir o mínimo possível. Trabalhe uma coisa de cada vez. Não se levante - temos muito tempo. Coloque seus sentimentos nele, seu coração, é seu mundo. Essas árvores são muito divertidas. Eu estou começando neles e tenho dificuldade em parar. Mas nós não estamos lá ainda, então não precisamos Se preocupe com isso. Agora vamos colocar algumas pequenas nuvens felizes aqui. Que diabo. Uma tinta fina vai ficar com uma tinta espessa. Eu vou misturar um pouco de cor.

Bellamio.

O único pré-requisito é que isso te faz feliz

Ver. Nós pegamos a esquina do pincel e deixamos jogar para frente. Isso é não planejado, isso realmente acontece. Eu sou uma espécie de um softy, eu não podia atirar Bambi, exceto com uma câmera. Eu acho que sou um pouco estranho. Eu gosto de falar com árvores e animais. Isso está bem, porém; Eu tenho mais diversão que a maioria das pessoas. Nós jogamos com nuvens hoje. Não sabia que você tinha tanto poder? Você pode mover montanhas. Você pode fazer qualquer coisa. Vamos lá aqui e começar a se divertir o mínimo possível. Trabalhe uma coisa de cada vez. Não se levante - temos muito tempo. Coloque seus sentimentos nele, seu coração, é seu mundo. Essas árvores são muito divertidas. Eu começo neles e tenho dificuldade em parar.

Pastagens.

Vamos nos divertir aqui e começar a se divertir

Tantas vezes evitamos a água corrente, e a água corrente é muito divertida. Todo mundo vai ver as coisas de maneira diferente - e é assim que deveria ser. Uma grande árvore forte precisa de raízes fortes. Steve quer reflexões, então vamos dar reflexões. Nós não comprometemos. Estamos apenas jogando aqui. Tornando todos aqueles pequenos macies que vivem nas nuvens. Deixe-se subir aqui e começar a se divertir o mínimo possível. Trabalhar em uma coisa de cada vez. Não se levante - temos bastante tempo. Coloque seus sentimentos nele, seu coração, é seu mundo. Essas árvores são muito divertidas. Eu comecei neles e tenho dificuldade em parar.

Foco.

Isso é não planejado realmente acontece

Mas nós ainda não estamos lá, então não precisamos nos preocupar com isso. Agora, vamos colocar algumas pequenas nuvens felizes aqui. O que o diabo. Uma tinta fina vai ficar com uma tinta grossa. Eu vou misturar uma pequena cor. Nós usaremos van Dyke Brown, vermelho permanente e um pouco de azul prussiano. Vamos lá aqui e começar a se divertir o mínimo possível. Trabalhe uma coisa de cada vez. Não se levante - temos muito tempo. Coloque seus sentimentos nele, seu coração, é seu mundo. Essas árvores são muito divertidas. Eu começo neles e tenho dificuldade em parar.

Isso é tudo. O controle deslizante está pronto! Boa sorte no trabalho

Saudações a você novamente no meu blog. Hoje em CSS, graças aos novos seletores, houve uma oportunidade para fazer um controle deslizante sem scripts. Então, neste artigo, mostrarei como fazer um controle deslizante adaptativo no CSS3?

Plano de aula

Então hoje vou mostrar-lhe muito detalhes como criar seu próprio controle deslizante sem scripts, adaptá-lo a qualquer dispositivo e altere facilmente sua aparência no futuro, além de adicionar novos slides. Faremos apenas 3 slides que mudarão manualmente ao clicar nos botões. Bem, vamos começar!

Slider de marcação

Primeiro de tudo, é necessário entender o que será a marcação. Nesta captura de tela, você pode ver meu exemplo de marcação, de acordo com isso e trabalharei hoje.
Eu também dupliquei todo esse código para que você possa copiar e inserir-se.
Primeiro de tudo, você precisa criar botões de switches de slides. Como o slide será três, então o mesmo precisa dos botões:

Cada um recebe seu próprio, identificador exclusivo e um é selecionado por padrão.

O último pedaço de código que precisamos. Ele exibe as assinaturas para os botões, mas na verdade os usamos para ocultar os botões padrão (os botões de opção não são executados através dos estilos) e colocar esses blocos que podem ser emitidos em vez deles. São eles que servirão como botões de mudança, e o pacote com os botões de opção é feito através de um atributo de formulário especial.

E agora todo esse código precisa ser embrulhado em um recipiente comum. Deixe ser um bloco com uma classe de envoltório.

Começamos a criar um controle deslizante - os estilos iniciais da página

Então, primeiro, definiremos estilos comuns que ajudarão a redefinir todos os recuos padrão e, ao mesmo tempo, fazer os travessões internos e os quadros levados em conta na largura dos elementos. Isso é feito assim:

* {
Margem: 0;
Preenchimento: 0;
-Webkit-box-dimensionamento: caixa de fronteira;
-Mozar-caixa-dimensionamento: border-box;
-O-caixa-dimensionamento: border-box;
Caixa-dimensionamento: border-box;
}

By the way, * - significa todos os seletores. Isto é, um seletor universal e global.

Nós decoramos o recipiente. É o bloco em si que contém todos os 3 de nossas partes importantes - botões, slides e assinaturas.

Embrulho (
Altura: 350px;
Margem: 0 Auto;
Posição: Relativo;
Largura: 600px;
}

Largura e altura que você pode exibir Qualquer umDependendo de quais tamanhos serão suas fotos para slides. Eu coloi fotos com antecedência para um tamanho de 600 por 350 pixels, portanto especifico tais dimensões. Margem: 0 Linhas Automáticas O contêiner exatamente no centro da página, e o posicionamento relativo permitirá que você coloque com precisão os botões no recipiente mais tarde.

Nós elaboramos o controle deslizante e slides

Inicialmente, aqui estão esses estilos:

Slider (
Fundo-cor: # 999;
Altura: herdar;
Estouro: oculto;
Posição: Relativo;
Largura: herdar;
}

Apontaram o controle deslizante são a mesma largura e altura, bem como um recipiente comum. Também especificamos a cor e o posicionamento, e a propriedade de estouro: cortes ocultos tudo o que não cai no bloco.

O próximo caso deve ser emitido os próprios slides:

Slides (
Altura: herdar;
Opacidade: 0;
Posição: Absoluto;
Largura: herdar;
Z-index: 0;
}
.Auto1 (fundo-imagem: url (bmw.jpg);)
.Auto2 (fundo-imagem: URL (Audi.jpg);)
.Auto3 (fundo-imagem: url (porshe.jpg);)

Também indique a largura e a altura como o slide. O valor herdado permite herdar o valor do bloco pai. Usando as propriedades do z-index e opacidade, faremos nossas fotos invisíveis. Abaixo nós claramente prescrevemos imagens de fundo.

Até agora não veremos nada, apenas um fundo cinza, porque nossas imagens estão ocultas.

Nós decoramos os botões do comutador

Agora você precisa remover botões de rádio padrão e estilizar assinaturas.

Enrole\u003e Entrada (
Mostrar nenhum;
}

Nós removemos os botões de rádio.

Envoltório .control (
Posição: Absoluto;
margem esquerda: -50px;
Esquerda: 50%;
}

Com a ajuda desses estilos, vamos nos concentrar o bloco com os botões no centro.

Etiqueta de envoltório (
Cursor: Ponteiro;
Exibir: bloco inline;
Altura: 25px;
Margem: 10px;
Posição: Relativo;
Largura: 25px;
Fronteira: 2px cinza sólido;
Raio de fronteira: 30% / 10px;
}

Esses estilos fazem uma coisa muito importante - eles nos permitem emitir botões. Você precisa definir o tamanho dos botões, definido para eles o tipo de caixa de bloco, recuos e quadro cinza. Você também pode adicionar cantos de arredondamento.

Agora temos três botões centrados abaixo dos slides, é apenas um quadro cinza. Vamos fazer isso para que, quando você clica no botão, alguma imagem apareceu, indicando que o botão está ativo em este momento. By the way, a mesma técnica, apenas com caixas de seleção, mostro neste artigo.

Como trocaremos as imagens do carro, encontrei um ícone de direção na rede, reduzi-o até o tamanho de cerca de 20 a 20. Agora o caso é sábio - Adicione uma imagem de fundo ao botão se foi clicado.

# Point1: marcação de ~ .Control: NTH-OF-TYPE (1),
# Point2: marcada ~. Rótulo de controle: NTH-OF-TYPE (2),
# Ponto3: marcação de ~ .Control: NTH-OF-TYPE (3) (
Antecedentes: URL (Wheel.png) Não-Repete 50% 50%;
}

Isso é feito com esses seletores. O que eles estão fazendo? Em essência, este é um seletor complexo, uma condição inteira é registrada nela. Isso é algo semelhante à programação. Denota o seguinte: Se o botão de opção estiver selecionado, você precisará aplicar o estilo à assinatura que vai para algum lugar na marcação. Agora, quando você clica nos botões, a imagem do volante aparece dentro!

O estágio mais importante é forçar a mudança!

Na verdade, saímos para fazer um pouco. Ou seja, para fazer em vez da área cinzenta no controle deslizante apareceu imagens com carros que se afastava com sucesso. Para fazer isso, você precisa aplicar mais um seletores complexos:

# Ponto1: verificado ~ .slider\u003e .auto1,
# Point2: verificado ~ .slider\u003e .auto2,
# Ponto3: verificado ~ .slider\u003e .auto3 (
Opacidade: 1;
Z-index: 1;
}

O que está acontecendo? Agora, se você tentar o controle deslizante em ação, será completamente trabalhado. Com esses seletores, especificamos o seguinte: Se o botão de opção for pressionado, faça o slide desejado que encontra em algum lugar no código HTML (mais botões de rádio).

Assim, ao clicar no primeiro botão, ele é mostrado para nós um carro BMW, quando clicando no segundo - Audi, ao clicar no terceiro - Porshe. E todo esse tempo ao alternar, o ícone de direção aparece nesse botão, o slide está ativo.

Então, fizemos um controle deslizante. Isso continua a adaptá-lo.

Adaptamos o controle deslizante, visualizando dispositivos móveis

Enquanto nosso controle deslizante tem uma largura fixa de 600 pixels. Assim, os problemas começarão a ocorrer nas telas a menos do que esta largura. Em particular, a barra de rolagem horizontal aparecerá. Para evitar isso, temos um pouco para ajustar o código escrito. Isso é o que você precisa mudar:

Para o bloco de envoltório, ou seja, o contêiner principal não é largura, mas a largura máxima: 600px. Isso permitirá que o contêiner diminua se a janela se tornar menor em largura.
Slider (Slider) É necessário registrar largura: 100%;
SlideSh (slides) não muda nada.

Alterações totais podem ser vistas neste código:

Embrulho (
Largura máxima: 600px;
}
.SLIDER (
Largura: 100%;
}

Ótimo, agora resta registrar um par de solicitações de mídia para fazer um controle deslizante totalmente adaptativo, bem como imagens de escala para novas telas. Experimental por eu descobri que a imagem deslizante começa a não se encaixar na tela a aproximadamente a largura da janela em 600 pixels. Então, sobre este enredo e você precisa fazer uma mudança nos estilos. Para fazer isso, escreva a primeira solicitação de mídia.

A propósito, escrevi em detalhes sobre consultas de mídia e sua aplicação neste artigo. Eu aconselho você a se familiarizar com isso, que não tem ideia de design adaptativo.

Consequentemente, para a largura de 650 pixels e menos tudo foi exibido bem, eu ofereço tal mudança nos estilos:

@Media tela e (largura máxima: 650px) (
.embrulho (
Largura máxima: 480px;
Altura: 280px;
}
.Slides (
Fundo de tamanho: capa;
}
}

A largura do controle deslizante diminuirá, a altura também diminuirá. Para os lâminas, prescrevemos uma propriedade que escala imagens para que eles mantenham suas proporções completamente colocadas em um controle deslizante sem cortar ao mesmo tempo.

Excelente, agora você pode verificar e certificar-se de que com uma largura de menos de 650 pixels, o controle deslizante é transformado e parece bom, sem cortar a imagem.

O último ponto é a largura de cerca de 400 pixels. Nele, nossa foto começa a não colocar e precisa agir. Para fazer isso, vou escrever outra solicitação de mídia:

Tela @media e (largura máxima: 400px) (
.embrulho (
Largura máxima: 320px;
Altura: 180px;
}
.Slides (
Fundo de tamanho: capa;
}
}

Mesmo assim, apenas reduza a largura e a altura do recipiente. Excelente, agora nosso controle deslizante é totalmente adaptável! Mesmo em. celular Com uma largura de 320 pixels, ele ficará ótimo. No entanto, veja por si mesmo:

Graças aos pedidos de mídia, as imagens são proporcionais para diminuir, mantendo suas proporções.

Adicione efeitos deslizantes quando as transições

Bem, um bônus neste artigo você pode ver um par de efeitos que podem ser implementados quando você passa os blocos. Então, basta escolher qualquer um deles e escrever slides (.slides) e quando uma imagem aparece, cancele o efeito do efeito. Para ver o resultado, você precisa definir os slides da propriedade de transição para que as transições sejam suaves. Efeito de exemplo:

Slides (
Transformar: girar (50DEG);
Transição: 1S;
}

Agora, um seletor bastante, o que torna o slide visível, para registrar o cancelamento da transformação:

# Ponto1: verificado ~ .slider\u003e .auto1 (
Transformar: Nenhum;
}

E assim para fazer para todos os slides. Consequentemente, inicialmente a imagem será girada e será invisível, e quando aparecer, o efeito de um retorno suave para posição inicial. Assim, você pode criar seus efeitos. Bem, nós fizemos um controle deslizante, eu tenho tudo. Se você tiver dúvidas, esperando nos comentários.

Suplemento - Como torná-lo para que quando você clica no slide, a transição amarrada ao link de slides?

Em outras palavras, somos apenas fotos agora e como torná-los clicáveis. Para fazer isso, você deve ter um controle deslizante pronto nesta lição. Em seguida, você precisa encontrar uma peça no código HTML responsável pelos slides. Aqui está na captura de tela:

Como você pode ver, inseri dentro do primeiro e segundo link deslizante. Então, ao clicar no primeiro slide, uma transição para o Google ocorrerá ao clicar no segundo - no Yandex. Eu quero observar que o link será aberto na mesma janela, isto é, a página atual com o controle deslizante desaparecerá neste caso. Se você precisar abrir links de slides em uma nova janela, cada tag Você precisa adicionar atributo alvo. \u003d "_blank".

Mas não é tudo que você precisa fazer! Agora, ainda não funciona para que as imagens se cliquem, você precisa adicionar ao CSS que é o que:

Desliza um (
Exibir: bloco;
Largura: 100%;
Altura: 100%;
}

Ou seja, para todos os slides, fazemos um link para o elemento de bloco e aponto para ela a largura e a altura de 100% para que ocupa todo o espaço da imagem. Agora tudo deve funcionar, você pode verificar. Basta substituir os endereços nos links e você pode usar. Espero ter explicado o mais claramente possível.

Levantar sua atenção: Todos nós queremos postar seus sites em uma hospedagem confiável. Eu analisei centenas de hospedagens e encontrei o melhor - Hostiq. Na rede centenas feedback positivo Sobre ele, classificação média de usuários - 4.8 de 5. Deixe seus sites ficarem bem.