Uma seleção de controles deslizantes adaptáveis. Fazendo um controle deslizante simples usando jQuery plugin jQuery “Parallax Slider”

Este artigo descreve um método para implementar e criar um controle deslizante de imagem ou texto com inversão automática. A funcionalidade do controle deslizante permite definir o intervalo de alternância entre os slides, a velocidade, alterar o efeito e também selecionar um slide específico da lista. Neste exemplo, foi utilizado o método clássico de alteração de imagens - o aparecimento e desaparecimento de slides.

timeList - velocidade de troca de slides

TimeView - tempo de exibição

RadioBut - botões sob o slide para navegação rápida (botões de opção). Por padrão, true pode ser false .

Agora vamos começar! Vamos criar e abrir o arquivo index.htm

Cabeçallho 1

Descrição...

Título 2

Descrição...

Título 3

Descrição...

Título 4

Descrição...

Atenção! Neste exemplo, o texto é usado para fazer o slide funcionar; se você quiser usar uma imagem, coloque cada uma de suas imagens em uma tag; .

Como podemos ver, não há nada complicado no código apresentado. O slider-wrap determina a posição geral do controle deslizante e o alinha no meio da tela. O parâmetro slider posiciona e define a altura do nosso slide com a propriedade height. Se você usar um controle deslizante de imagem, especifique a altura das imagens nesta propriedade; se as alturas das imagens forem diferentes, especifique o máximo;

Para melhor visualização e atratividade do controle deslizante, use a mesma resolução de imagem.

Agora precisamos estilizar nosso controle deslizante. As setas para frente/trás para alternar os slides, bem como os botões de opção sob o controle deslizante, são usados ​​na forma de imagens e estão incluídos no arquivo. Vamos criar e abrir o arquivo style.css e adicionar a marcação que precisamos:

@import url("https://fonts.googleapis.com/css?family=Open+Sans|Roboto"); html, body ( height: 100%; ) body ( color: #4f4f5a; font-family: "Roboto", sans-serif; font-size: 16px; padding: 0; margin: 0; ) #slider-wrap ( max -largura:650px; margem: 100px automático; ) #slider (posição:relativa; altura: 200px; overflow: oculto; borda:#fafafa sólido 10px; ) .slide (largura:100%; altura: 100%; posição: absoluto ; superior: 0; esquerda: 0; alinhamento de texto: centro; margem inferior central: 2px; -99999px; ctrl-select:hover (cursor: ponteiro; posição de fundo: centro centro; ) .Radio-But .ctrl-select.active( posição de fundo: centro superior; ) #prewBut, #nextBut( display: bloco; largura: 40px; altura: 100%; posição: topo absoluto: 0; recuo do texto: -99999px; opacidade: 0,5; índice z: 3; esboço: nenhum !importante; ) #prewBut ( left: 10px; ) #nextBut ( right: 10px; background: url("arrowBg.png") centro direito sem repetição; ) #prewBut:hover, #nextBut:hover ( opacity: 1; )

Se as setas para frente/para trás interferirem na visibilidade do seu controle deslizante, elas poderão ficar invisíveis e aparecerão apenas quando você passar o mouse sobre elas. Nos parâmetros prewBut e nextBut, defina a propriedade opacity como 0.

Vamos criar e abrir nosso arquivo js, ​​que conterá o código do controle deslizante. Não se esqueça de conectar o framework jQuery, bem como a biblioteca jquery.ui - precisamos desta biblioteca para definir o elemento que desaparece e a aparência do slide. Você pode substituir o efeito especificado pelas propriedades fadeIn e fadeOut.

$(document).ready(function () ( var timeList = 300; var TimeView = 5000; var RadioBut = true; $(".slide").hide().eq(0).show(); var slideNum = 0; var slideTime; slideCount = $("#slider .slide").length; var animSlide = function(arrow)( clearTimeout(slideTime); function slideDirectionHide(slideFloatNum, directTo)( $(".slide").eq( slideFloatNum).fadeOut(timeList); função slideDirectionShow(slideFloatNum, directTo, pause)( $(".slide").eq(slideFloatNum).fadeIn(timeList, function() ( if(pause == true) ( ​​​​rotator() )); var old_slideNum = slideNum; if(arrow == "next")( slideDirectionHide(slideNum, "left"); if(slideNum == (slideCount-1))(slideNum=0;) else( slideNum++) slideDirectionShow(slideNum, "right", true ) else if(arrow == "prew") ( slideDirectionHide(slideNum, "right"); if(slideNum == 0)(slideNum=slideCount-1;) else (slideNum -=1) slideDirectionShow(slideNum, "left", true )else( if(arrow !== old_slideNum) ( if(arrow > old_slideNum) ( slideDirectionHide(slideNum, "left"); slideNum = seta; slideDirectionShow(slideNum, "direita", verdadeiro); )else if(seta< old_slideNum) { slideDirectionHide(slideNum, "right"); slideNum = arrow; slideDirectionShow(slideNum, "left", true); } } } $(".ctrl-select.active").removeClass("active"); $(".ctrl-select").eq(slideNum).addClass("active"); } if(RadioBut){ var linkArrow = $("") .prependTo("#slider"); $("#nextBut").click(function(){ animSlide("next"); return false; }) $("#prewBut").click(function(){ animSlide("prew"); return false; }) } var addSpan =""; $(".slide").each(function(index) { addSpan += "" + index + ""; }); $("" + addSpan +"").appendTo("#slider-wrap"); $(".ctrl-select:first").addClass("active"); $(".ctrl-select").click(function(){ var goToNum = parseFloat($(this).text()); animSlide(goToNum); }); var pause = false; var rotator = function(){ if(!pause){slideTime = setTimeout(function(){animSlide("next")}, TimeView);} } $("#slider-wrap").hover(function(){clearTimeout(slideTime); pause = true;}, function(){pause = false; rotator(); }); var clicking = false; var prevX; $(".slide").mousedown(function(e){ clicking = true; prevX = e.clientX; }); $(".slide").mouseup(function() { clicking = false; }); $(document).mouseup(function(){ clicking = false; }); $(".slide").mousemove(function(e){ if(clicking == true) { if(e.clientX < prevX) { animSlide("next"); clearTimeout(slideTime); } if(e.clientX >prevX) ( animSlide("prew"); clearTimeout(slideTime); ) clicando = false; ) )); $(".slide").hover().css("cursor", "ponteiro"); rotador(); ));

A função animSlide aceita três tipos de valores: next , prew e um valor numérico. O próximo parâmetro alterna o próximo slide, pré-visualiza o anterior e o valor numérico é o slide especificamente selecionado através dos botões de opção abaixo do slide. As funções slideDirectionHide e slideDirectionShow são quase semelhantes e idênticas, a primeira é responsável pelo desaparecimento do slide e pela direção do movimento do slide de saída, a segunda pelo aparecimento do slide, sua direção de movimento quando ele aparece, também como para o intervalo de tempo de exibição especificado.

Quando você passa o mouse sobre o controle deslizante, a exibição é pausada.

Só isso, se alguma coisa não estiver clara ou você tiver alguma dúvida, escreva e pergunte.

O controle deslizante se tornou muito popular recentemente. Cerca de metade de todos os modelos contém um controle deslizante.

Um controle deslizante é uma área do site (geralmente a parte central, logo após o cabeçalho). Seu objetivo é tornar o site mais informativo, “vivo”, tentando descrever as vantagens de uma empresa ou produto em diversas imagens.

Existem muitas opções para criar um controle deslizante. Veremos alguns dos mais populares. Fontes serão fornecidas para cada método.

Opção 1. Controle deslizante em JQuery (JavaScript)

Esta é uma foto do que você obtém com esta opção (a fonte deste exemplo está abaixo)

Para que o controle deslizante funcione, você precisa fazer o seguinte:

• Incluir javascript (arquivos java) nas tags de cabeçalho
• O arquivo de estilo está novamente nas tags de cabeçalho
• No local onde deseja exibir o controle deslizante, preencha a tag (como no exemplo acima)

Opção 2. Controle deslizante baseado em CSS

Para não carregar o site com scripts desnecessários, existe uma ótima maneira de fazer um controle deslizante baseado apenas em CSS (ou seja, puramente em estilos). Vejamos um exemplo.

Exemplo nº 1

Exemplo nº 2

Exemplo nº 3

Isto é o que deveria acontecer.

Do autor: apesar dos rumores sobre a suposta “morte” da parte das páginas da web visíveis sem rolagem, a necessidade de um bom controle deslizante não desapareceu. Sejamos honestos por um segundo: os controles deslizantes são divertidos. Além disso, nada mais, ao contrário do conteúdo em movimento, causa um efeito “uau” no usuário. Todos os controles deslizantes são um conjunto de vários slides que se substituem e é extremamente importante que o código do controle deslizante seja o mais leve possível. É nesses casos que o jQuery nos ajudará.

Dê uma olhada nos 20 controles deslizantes jQuery do Envato Market e você perceberá que existem controles deslizantes que são mais do que apenas um bloco de imagens que fluem suavemente através deles.

1. RoyalSlider – Galeria de imagens touchscreen usando jQuery

Hoje em dia, um controle deslizante responsivo e compatível com tela sensível ao toque significa muito mais do que antes. RoyalSlider combina os dois recursos: capacidade de resposta e funcionalidade de tela sensível ao toque. Uma boa escolha já que a galeria está escrita em HTML5 e CSS3.

Vários recursos interessantes:

Como criar um site você mesmo?

Otimização SEO

Altamente personalizável

Mais de 10 modelos iniciais

Há um substituto para transições CSS3

Na minha opinião, o recurso mais legal é a “arquitetura de script modular”, que permite excluir coisas desnecessárias do arquivo JS principal, reduzindo assim o peso. RoyalSlider, uma galeria de imagens touchscreen em JQuery, é um controle deslizante JavaScript robusto que deve ser adicionado ao kit de ferramentas de qualquer desenvolvedor.

2. Plug-in jQuery responsivo do Slider Revolution

Não é tão fácil fazer algo “revolucionário” com um controle deslizante. Quando se trata de controles deslizantes, há muitos recursos que você pode adicionar a eles. No entanto, Slider Revolution é uma tentativa muito boa. Entre os controles deslizantes jQuery, esta instância atende a todos os seus requisitos possíveis.

A lista de recursos do controle deslizante é muito grande, então listarei apenas os melhores:

Efeito paralaxe e animação personalizada

Número ilimitado de camadas e slides com links

pronto para usar, estilos profundamente personalizáveis

e muito mais

A capacidade de adicionar uma imagem, um player de vídeo incorporado e links de mídia social torna o Slider Revolution uma das opções mais flexíveis e personalizáveis ​​da web.

3. Plug-in de controle deslizante jQuery adaptável LayerSlider

O nome “Plugin de controle deslizante jQuery adaptativo LayerSlider” não pode realmente avaliar este controle deslizante.
Mais de 200 transições 2D e 3D entre slides vão virar a cabeça de qualquer pessoa.

Alguns recursos notáveis:

13 skins e 3 tipos de menu

Capacidade de colocar uma imagem fixa no topo do controle deslizante

E substituto do jQuery

E muito mais

Tal como acontece com o controle deslizante anterior, você pode adicionar quase qualquer conteúdo, até mesmo conteúdo multimídia residente em HTML5. LayerSlider dá vida aos controles deslizantes e é muito bonito.

4. Rotador de banner/apresentação de slides jQuery

jQuery Banner Rotator / Slideshow é um controle deslizante bastante simples que não sacrifica a funcionalidade principal.

Possibilidades:

Dicas de ferramentas, inserções de texto, etc.

Pré-visualizações e diversas opções de visualização de componentes

Temporizador com atraso para um controle deslizante ou todos

Múltiplas transições para todos os slides ou diferentes transições para cada um individualmente

O jQuery Banner Rotator/Slideshow, em comparação com outros controles deslizantes JQuery, possui apenas recursos básicos, mas você não deve se esquecer disso.

5. All In One Slider – Plug-in de controle deslizante jQuery responsivo

Qualquer controle deslizante que aparece na Internet tem uma visão única e resolve quaisquer problemas em sua área. Mas não este. All In One Slider pode ser chamado de “tudo incluído”.

Acho que a maioria dos desenvolvedores e designers web tem uma solução comprovada, mas estão sempre procurando por algo novo. E este “algo novo” inclui:

Rotador de banner

Banner com visualização

Banner com playlist

Controle deslizante de conteúdo

Carrossel

Todos os tipos de controles deslizantes suportam a maioria, senão todas, das funcionalidades exigidas pelos controles deslizantes jQuery. O All In One Slider terá tudo incluído?

6. UnoSlider – Controle deslizante adaptável da tela sensível ao toque

Se o seu controle deslizante não responder e não for compatível com telas sensíveis ao toque, você está usando o controle deslizante errado. UnoSlider está correto.

Este controle deslizante encontrou seu lugar ao sol entre a simplicidade e um rico conjunto de funções. Funções:

Suporte temático

12 temas prontos

40 transições

Suporte IE6+

Todos os recursos com foco em design e estilo, tornando o UnoSlider um ótimo controle deslizante de conteúdo com capacidade de adicionar temas.

7. Controle deslizante mestre - controle deslizante da tela sensível ao toque jQuery

Procurando por “um controle deslizante jQuery para governar todos eles”? Experimente Master Slider – controle deslizante JQuery touchscreen para diferentes tamanhos de tela...

Quando se trata de um bom design, este exemplo é um dos melhores:

Mais de 25 modelos

Transições aceleradas por hardware

Suporte para tocar e deslizar

E muito mais

Transições interativas, camadas animadas e pontos de acesso certamente chamarão sua atenção. Master Slider é uma obra de arte.

8. TouchCarousel - scroller e controle deslizante de conteúdo jQuery

TouchCarousel oferece suporte e atualizações gratuitas. No entanto, esses não são todos os recursos deste controle deslizante leve de carrossel jQuery.

Se a palavra “toque” estiver no nome, você pode adivinhar que o controle deslizante é totalmente adaptável e suporta toques. Outras características:

Otimização SEO

Reprodução automática inteligente

Transições CSS3 com aceleração de hardware

UI personalizável e 4 skins para Photoshop

O TouchCarousel, devido à sua rolagem física exclusiva de slides, leva as experiências móveis a um nível totalmente novo.

9. Controle deslizante avançado - controle deslizante jQuery XML

Os controles deslizantes jQuery não podem ser usados ​​apenas em sites. Eles também podem ser úteis em aplicações web. O controle deslizante avançado permite que você faça isso.

Com marcação HTML ou XML, este controle deslizante avançado causa uma impressão duradoura:

Camadas animadas e vídeo inteligente

Mais de 100 transições e mais de 150 propriedades personalizadas

15 skins de controle deslizante, 7 skins de barra de rolagem e suporte lightbox integrado

Navegação pelo teclado, suporte ao toque e personalização total

E muito mais

No entanto, o melhor recurso é Advanced Slider - jQuery XML Slider API, tornando-o uma opção de controle deslizante ideal para seu aplicativo da web.

10. Efeito de zoom in/out do jQuery Slider totalmente responsivo

Um daqueles controles deslizantes jQuery que farão você assistir a uma demonstração antes de começar a ler sobre seus recursos. Você só quer entender o que significa esse “efeito de aumento/redução de zoom”.

O efeito de zoom é bastante fraco, mas adiciona uma sensação de controle e toque real à imagem enquanto o resto do controle deslizante fica estático. Recursos especiais do controle deslizante:

Transições de camada CSS3

Opção de final de animação para camadas

Opções de largura fixa, tela inteira e largura total

Texto animado com formatação HTML e CSS

A maioria dos controles deslizantes tenta incorporar tantos efeitos quanto possível, mas o jQuery Slider Zoom In/Out Effect Fully Responsive tem apenas o efeito Ken Burns, mas está bem implementado.

11. Evolução do carrossel jQuery

Assim como o já mencionado Advanced Slider - jQuery XML Slider, o jQuery Carousel Evolution possui sua própria API que pode ser usada para aprimorar a funcionalidade ou integrar o controle deslizante em outro projeto.

Como criar um site você mesmo?

Quais tecnologias e conhecimentos são necessários hoje para criar sites por conta própria? Descubra no intensivo!

Com imagens, marcação HTML, vídeos do YouTube e Vimeo você também receberá:

Otimização SEO

9 estilos de carrossel

Efeitos de sombra e reflexo

O tamanho da imagem pode ser ajustado, tanto na frente quanto atrás

jQuery Carousel Evolution é um carrossel simples com muitos casos de uso.

12. Controle deslizante sexy

Sexy Slider não é mais tão sexy como antes. No entanto, devido à sua idade, este controle deslizante é confiável.

O controle deslizante não parece muito impressionante à primeira vista, mas se você personalizá-lo bem, ele se encaixará perfeitamente no seu design. Possibilidades:

Slides de reprodução automática

Legendas de imagens

Reprodução contínua de slides

6 efeitos de transição

Sexy Slider está esperando que você libere todo o seu poder e potencial.

13. jQuery Image & Content Scroller com Lightbox

Com todos esses designs compatíveis com dispositivos móveis e suporte para tela sensível ao toque, é bom ver um controle deslizante jQuery que não se esqueceu dos computadores desktop.

jQuery Image & Content Scroller com Lightbox suporta entrada de teclado e roda do mouse, bem como outros recursos:

Orientação horizontal e vertical

Legendas de texto dentro ou fora do controle deslizante

Capacidade de definir um certo número de slides visíveis ao mesmo tempo

Imagens inline, Flash, iframe, Ajax e conteúdo inline

O controle deslizante também possui uma mesa de luz integrada. Se desejar, no jQuery Image & Content Scroller com Lightbox você não pode iniciar o controle deslizante em si, mas iniciar o lightbox separadamente.

14. Translúcido – Rotador/controle deslizante de banner adaptável

A maioria dos controles deslizantes jQuery tem seu próprio design. Você pode personalizá-lo sozinho, mas às vezes você só quer que tudo fique dentro do controle deslizante. Apresentamos a você Translúcido.

O controle deslizante tem muitas predefinições. Talvez você só precise definir certas configurações e pronto. Possibilidades:

6 estilos diferentes

4 efeitos de transição

2 transições de furto

Botões e legendas personalizáveis

Como os outros, este controle deslizante é sensível ao toque, responsivo e acelerado por hardware. Translúcido é um controle deslizante com design minimalista que coloca o conteúdo em primeiro lugar.

15. FSS - Plug-in de site deslizante em tela cheia

Você quer fazer um site em tela cheia composto por slides? Então você precisa do FSS.

Na verdade, usando este controle deslizante JQuery é extremamente fácil criar um site com controle deslizante em tela inteira. Possibilidades:

Suporte AJAX

Barra de rolagem

Suporte à tecnologia de deep linking

2 efeitos de transição diferentes

Também vale prestar atenção ao suporte ao teclado e ao guia de 11 páginas. Porém, a verdadeira impressão é o peso do FSS, apenas 5Kb.

16. Zozo Accordion – Controle deslizante adaptativo da tela sensível ao toque

Outro exemplo de controle deslizante jQuery que se concentra no estilo e faz um bom trabalho. Zozo Accordion é obrigatório para quem procura um bom controle deslizante de acordeão com capacidade de mudar de estilo.

Essa beleza de animação CSS3 também possui uma ampla gama de recursos:

Acordeão horizontal e vertical

Otimização semântica de HTML5 e SEO

Suporte para toque, teclado e WAI-ARIA

Mais de 10 skins e 6 layouts

E muito mais

Zozo Accordion possui suporte gratuito e atualizações constantes, além de todos os recursos que você deseja em um acordeão jQuery.

17. Plug-in de controle deslizante OneByOne responsivo jQuery

O plug-in jQuery Responsive OneByOne Slider é mais como uma animação simples do que um controle deslizante. Em vez de exibir um slide de cada vez, esta instância preenche a tela com slides, um passo de cada vez, até que não haja mais espaço na área antes de passar para o próximo slide.

A animação CSS3 é executada em Animate.css, é leve, consiste em várias camadas e é compatível com dispositivos móveis. Vários recursos:

Também existe uma opção de navegação arrastar e soltar. O plug-in jQuery Responsive OneByOne Slider é desenvolvido pelo Twitter Bootstrap Carousel.

18. Acordeão - plugin jQuery

Não existe controle deslizante jQuery mais fácil do que este. Para funcionar, você precisa baixar apenas 3 KB do controle deslizante, o que torna o Accordionza o controle deslizante de acordeão mais leve.

Se não gostar das três opções de estilo, você mesmo pode ajustar o HTML e o CSS. Possibilidades:

Navegação pelo teclado

Efeitos e botões fáceis de personalizar

Técnica de aprimoramento progressivo – funciona sem JavaScript

Lembre-se que o Accordionza pode exibir muitas variações de conteúdo misto, tornando-o extremamente flexível.

19. mightySlider – controle deslizante multifuncional responsivo

MightySlider é um controle deslizante verdadeiramente poderoso. Ele pode ser usado não apenas como um simples controle deslizante de imagem, mas também como um controle deslizante unidirecional de tela cheia com navegação por itens de menu. Com sua ajuda você pode criar um maravilhoso site de uma página.

Sob o capô você encontrará muitas opções:

Suporte para teclado, mouse e toque

Transições CSS3 com aceleração de hardware

Limpe a marcação válida e a otimização de SEO

Número ilimitado de slides, camadas para legendas e efeitos para eles

A API é muito poderosa e amigável ao desenvolvedor, o que abre diferentes maneiras de usá-la. MightySlider é um excelente controle deslizante jQuery progressivo com código limpo e bem comentado.

20. Parallax Slider - Plugin jQuery responsivo

O Parallax Slider funciona como o jQuery Responsive OneByOne Slider Plugin e permite animar cada camada separadamente em um único slide. Você pode animar todos os slides ou até mesmo um adicionando animação de paralaxe.

O conjunto inclui 4 controles deslizantes de diferentes tipos, todos com efeito de paralaxe. Como outros controles deslizantes jQuery, ele possui:

Totalmente personalizável

Suporte de toque

Camadas totalmente responsivas e ilimitadas

Reprodução automática, looping, ajuste de altura e largura e temporizador

As camadas animadas não envolvem apenas texto ou imagens. Você também pode adicionar vídeos do YouTube, Vimeo e HTML5. Parallax Slider é outro bom exemplo de como você pode simular efeitos do Flash ainda melhor do que o próprio Flash, que também é compatível com todos os dispositivos.

Conclusão

É interessante ver como os controles deslizantes do jQuery evoluíram de algo que simplesmente substituiu uma imagem por outra para um enorme conjunto de ferramentas criativas. Agora existem 3D, controles deslizantes de paralaxe, controles deslizantes de página inteira, controles deslizantes adaptativos e aqueles que podem ser visualizados em computadores desktop e smartphones.

Se você não gosta de nenhum dos controles deslizantes desta lista, você sempre pode pegar o Tutorial de código jQuery no Envato e criar algo completamente novo e único.

Ou confira outros controles deslizantes no Envato Market - há muito por onde escolher. Qual é o seu controle deslizante jQuery favorito e por quê?

1. Excelente apresentação de slides jQuery

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

2. Plug-in jQuery “Carrossel de escalas”

Apresentação de slides escalável usando jQuery. Você pode definir os tamanhos de apresentação de slides que melhor se adequam a você.

3. Plug-in jQuery “slideJS”

Controle deslizante de imagem com descrição de texto.

4. Plug-in “JSliderNews” 5. Controle deslizante CSS3 jQuery

Quando você passa o mouse sobre as setas de navegação, uma miniatura circular do próximo slide aparece.

6. Belo controle deslizante “Ciclo de apresentação” do jQuery

Controle deslizante jQuery com indicador de carregamento de imagem. A mudança automática de slides é fornecida.

7. Plug-in jQuery “Parallax Slider”

Slider com efeito de fundo volumétrico. O destaque deste controle deslizante é o movimento do fundo, que consiste em várias camadas, cada uma delas rolando em velocidades diferentes. O resultado é uma imitação do efeito volumétrico. Parece muito bonito, você pode ver por si mesmo. O efeito é exibido de forma mais suave em navegadores como Opera, Google Chrome, IE.

8. Controle deslizante jQuery novo e leve “bxSlider 3.0”

Na página de demonstração na seção “exemplos” você pode encontrar links para todos os usos possíveis deste plugin.

9. controle deslizante de imagem jQuery, plugin “slideJS”

Um elegante controle deslizante jQuery certamente pode decorar seu projeto.

10. Plug-in de apresentação de slides jQuery “Easy Slides” v1.1

Um plugin jQuery fácil de usar para criar apresentações de slides.

11. Plug-in jQuery Slidy

Plugin jQuery leve em várias versões. A mudança automática de slides é fornecida.

12. Galeria jQuery CSS com mudança automática de slides

Caso o visitante não clique nas setas “Avançar” ou “Voltar” dentro de um determinado tempo, a galeria começará a rolar automaticamente.

13. controle deslizante jQuery “Nivo Slider”

Plugin muito profissional, leve e de alta qualidade com código válido. Existem muitos efeitos de transição de slides diferentes disponíveis.

14. controle deslizante jQuery “MobilySlider”

Controle deslizante novo. Controle deslizante jQuery com vários efeitos de alteração de imagem.

15. Plug-in jQuery “Slider²”

Controle deslizante leve com trocador automático de slides.

16. Novo controle deslizante javascript

Controle deslizante com mudança automática de imagem.

Plugin para implementação de apresentações de slides com troca automática de slides. É possível controlar a exibição usando miniaturas de imagens.

Controle deslizante de imagem jQuery CSS usando o plugin NivoSlider.

19. controle deslizante jQuery “jShowOff”

Plugin para rotação de conteúdo. Três opções de utilização: sem navegação (com mudança automática no formato de apresentação de slides), com navegação em forma de botões, com navegação em forma de miniaturas de imagens.

20. Plug-in do portfólio de efeitos do obturador

Plugin jQuery novo para projetar o portfólio de um fotógrafo. A galeria tem um efeito interessante de mudança de imagens. As fotos se sucedem com um efeito semelhante ao funcionamento de um obturador de lente.

21. Controle deslizante CSS javascript leve “TinySlider 2”

Implementação de um slider de imagem utilizando javascript e CSS.

22. Controle deslizante incrível “Tinycircleslider”

Controle deslizante redondo elegante. A transição entre as imagens é feita arrastando o controle deslizante em forma de círculo vermelho ao redor da circunferência. Ele se encaixará perfeitamente no seu site se você usar elementos redondos em seu design.

23. Controle deslizante de imagem com jQuery

Controle deslizante leve “Kit Slider”. O controle deslizante está disponível em diferentes designs: vertical e horizontal. Também são implementados vários tipos de navegação entre imagens: através dos botões “Avançar” e “Voltar”, através da roda do mouse, através do clique do mouse no slide.

24. Galeria com miniaturas “Slider Kit”

Galeria "Kit Slider". A rolagem das miniaturas é realizada vertical e horizontalmente. A transição entre as imagens é feita por meio de: roda do mouse, clique do mouse ou passar o cursor sobre a miniatura.

25. Controle deslizante de conteúdo jQuery “Kit Slider”

Controle deslizante de conteúdo vertical e horizontal usando jQuery.

26. Apresentação de slides jQuery “Kit Slider”

Apresentação de slides com mudança automática de slides.

27. Controle deslizante CSS3 javascript profissional leve

Um controle deslizante jQuery e CSS3 criado em 2011.

Apresentação de slides jQuery com miniaturas.

29. Apresentação de slides jQuery simples

Apresentação de slides com botões de navegação.

30. Apresentação de slides jQuery “Skitter” incrível

Plugin jQuery Skitter para criar apresentações de slides impressionantes. O plugin suporta 22 (!) tipos de efeitos de animação diferentes ao alterar imagens. Pode trabalhar com duas opções de navegação de slides: usando números de slides e usando miniaturas. Não deixe de assistir à demonstração, um achado de altíssima qualidade. Tecnologias utilizadas: CSS, HTML, jQuery, PHP.

31. Apresentação de slides “estranha”

Apresentação de slides funcional. Os slides podem ser: imagens simples, imagens com legendas, imagens com dicas de ferramentas, vídeos. Você pode usar setas, links de números de slides e teclas esquerda/direita do teclado para navegar. A apresentação de slides vem em diversas versões: com e sem miniaturas. Para visualizar todas as opções, siga os links Demo #1 - Demo #6 localizados no topo da página de demonstração.

Um design muito original para o controle deslizante de imagem, que lembra um leque. Transição de slides animada. A navegação entre as imagens é feita por meio de setas. Há também uma mudança automática que pode ser ligada e desligada usando o botão Reproduzir/Pausar localizado na parte superior.

Controle deslizante jQuery animado. As imagens de fundo são dimensionadas automaticamente conforme a janela do navegador é redimensionada. Para cada imagem aparece um bloco com uma descrição.

34. Controle deslizante “Flux Slider” usando jQuery e CSS3

Novo controle deslizante jQuery. Vários efeitos animados interessantes ao mudar de slide.

35. Plug-in jQuery “jSwitch”

Galeria jQuery animada.

Uma apresentação de slides jQuery fácil com mudança automática de slides.

37. Nova versão do plugin “SlideDeck 1.2.2”

Controle deslizante de conteúdo profissional. Existem opções com troca automática de slides, bem como uma opção de uso da roda do mouse para mover-se entre os slides.

38. Controle deslizante jQuery “Sudo Slider”

Controle deslizante de imagem leve usando jQuery. Existem muitas opções de implementação: mudança horizontal e vertical de imagens, com e sem links para o número do slide, com e sem legendas de imagens, vários efeitos de mudança de imagem. Existe uma função de mudança automática de slides. Links para todos os exemplos de implementação podem ser encontrados na página de demonstração.

39. apresentação de slides jQuery CSS3

A apresentação de slides com miniaturas suporta o modo de mudança automática de slides.

40. controle deslizante jQuery “Flux Slider”

Controle deslizante com muitos efeitos de alteração de imagem.

41. Controle deslizante jQuery simples

Controle deslizante de imagem elegante usando jQuery.

Se você precisar adicionar um controle deslizante de imagem jQuery de alta qualidade ao seu site, neste artigo você encontrará uma descrição dos plug-ins necessários. Embora JQuery tenha tornado o trabalho com JavaScript muito mais fácil, ainda precisamos de plug-ins para acelerar o processo de web design.

Podemos fazer alterações em alguns desses plugins e criar novos controles deslizantes que sejam muito mais adequados aos propósitos do nosso site.

Para outros controles deslizantes, basta adicionar títulos, imagens e selecionar os efeitos de transição de slides que acompanham o controle deslizante. Todos esses plug-ins são acompanhados de documentação detalhada, portanto, não será difícil adicionar novos efeitos ou funções a eles. Você pode até alterar gatilhos baseados em eventos se for um programador JQuery experiente.

As últimas tendências, como design responsivo, são muito importantes para projetos web, esteja você implementando um plugin ou um script. Todos esses elementos tornam cada um desses plug-ins muito flexível. Tudo o que saiu em 2014 está incluído nesta lista.

Controles deslizantes de imagem JQuery Jssor Slider responsivo

Recentemente me deparei com esse poderoso controle deslizante JQuery e pude ver em primeira mão que ele faz seu trabalho muito bem. Ele contém possibilidades ilimitadas que podem ser expandidas através do código-fonte aberto do controle deslizante:

• Design adaptativo;
• Mais de 15 opções de personalização;
• Mais de 15 efeitos de mudança de imagem;
• Galeria de imagens, carrossel, suporte para tela cheia;
• Rotador de banner vertical, lista de slides;
• Suporte de vídeo.

Demonstração | Download

PgwSlider - controle deslizante responsivo baseado em JQuery/Zepto

A única tarefa deste plugin é mostrar slides de imagens. É muito compacto, já que os arquivos JQuery têm apenas 2,5 KB, o que permite carregar muito rapidamente:

• Layout adaptativo;
• Otimização SEO;
• Suporte para diferentes navegadores;
• Transições simples de imagens;
• O tamanho do arquivo é de apenas 2,5 KB.

Demonstração | Download

Controle deslizante vertical de notícias Jquery

Um controle deslizante JQuery flexível e útil projetado para recursos de notícias com uma lista de publicações no lado esquerdo e uma imagem exibida no lado direito:

• Design adaptativo;
• Coluna vertical para troca de notícias;
• Cabeçalhos expandidos.

Demonstração | Download

Controle deslizante Wallop

Este controle deslizante não contém jQuery, mas gostaria de apresentá-lo porque é muito compacto e pode reduzir significativamente o tempo de carregamento da página. Deixe-me saber se você gostou:

• Layout adaptativo;
• Design simples;
• Várias opções de troca de slides;
• Código JavaScript mínimo;
• O tamanho é de apenas 3 KB.

Demonstração | Download

Galeria Polaroid de estilo plano

Uma galeria de documentos espalhados em uma mesa, com layout flexível e design bonito, deve ser do interesse de muitos de vocês. Mais adequado para tablets e telas grandes:

• Controle deslizante adaptativo;
• Projeto plano;
• Mudança aleatória de slides;
• Acesso total ao código-fonte.

Demonstração | Download

A-Slider

Demonstração | Download

HiSlider – controle deslizante de imagem HTML5, jQuery e WordPress

HiSlider introduziu um novo plugin de controle deslizante jQuery gratuito com o qual você pode criar uma variedade de galerias de imagens com transições fantásticas:

• Controle deslizante adaptativo;
• Não requer conhecimentos de programação;
• Vários modelos e skins incríveis;
• Belos efeitos de transição;
• Suporte para diversas plataformas;
• Compatível com WordPress, Joomla, Drupal;
• Capacidade de exibir diferentes tipos de conteúdo: imagens, vídeos do YouTube e vídeos do Vimeo;
• Configuração flexível;
• Recursos adicionais úteis;
• Quantidade ilimitada de conteúdo exibido.

Demonstração |Baixar

Uau controle deslizante

WOW Slider é um controle deslizante de imagem jQuery responsivo com efeitos visuais incríveis (dominó, girar, desfocar, virar e piscar, voar, cortinas) e modelos profissionais.

WOW Slider vem com um assistente de instalação que permite criar controles deslizantes fantásticos em segundos, sem precisar entender o código ou editar imagens. Versões do plugin para Joomla e WordPress também estão disponíveis para download:

• Totalmente responsivo;
• Suporta todos os navegadores e todos os tipos de dispositivos;
• Suporte para dispositivos sensíveis ao toque;
• Fácil instalação no WordPress;
• Flexibilidade na configuração;
• Otimizado para SEO.

Demonstração |Baixar

Nivo Slider – plugin jQuery gratuito

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

• Requer JQuery 1.7 e superior;
• Belos efeitos de transição;
• Simples e flexível de configurar;
• Compacto e adaptável;
• Código aberto;
• Poderoso e simples;
• Vários modelos diferentes;
• Recorte automático de imagens.

Demonstração |Baixar

Controle deslizante jQuery simples com documentação técnica

A ideia foi inspirada nos sliders da Apple, nos quais vários pequenos elementos podem voar com diferentes efeitos de animação. Os desenvolvedores tentaram implementar este conceito, levando em consideração os requisitos mínimos para a criação de um design simples de loja online, em que os elementos “voadores” representam diferentes categorias:

• Layout adaptativo;
• Design minimalista;
• Vários efeitos de drop-out e mudança de slides.

Demonstração |Baixar

Controle deslizante de imagem jQuery em tamanho real

Um controle deslizante muito simples que ocupa 100% da largura da página e se adapta aos tamanhos de tela dos dispositivos móveis. Funciona com transições CSS e as imagens são “empilhadas” junto com âncoras. A âncora pode ser substituída ou removida se você não quiser anexar um link à imagem.

Quando instalado, o controle deslizante se expande para 100% da largura da tela. Também pode reduzir automaticamente o tamanho das imagens dos slides:

• Controle deslizante JQuery adaptável;
• Tamanho completo;
• Design minimalista.

Demonstração |Baixar

Controle deslizante de conteúdo elástico + tutorial

O Elastic Content Slider ajusta automaticamente a largura e a altura com base nas dimensões do elemento pai. Este é um controle deslizante jQuery simples. Consiste em uma área de slides na parte superior e uma barra de guias de navegação na parte inferior. O controle deslizante ajusta sua largura e altura de acordo com as dimensões do contêiner pai.

Quando visualizadas em pequenas telas diagonais, as guias de navegação se transformam em pequenos ícones:

• Design adaptativo;
• Rolagem com clique do mouse.

Demonstração |Baixar

Controle deslizante de pilha 3D grátis

Um controle deslizante experimental que percorre imagens em 3D. As duas pilhas lembram pilhas de papel, das quais, ao rolar, as imagens são exibidas no centro do controle deslizante:

• Design adaptativo;
• Virar - transição;
• Efeitos 3D.

Demonstração |Baixar

Slider de fenda em tela cheia baseado em JQuery e CSS3 + tutorial

Este tutorial mostrará como criar um controle deslizante com um toque especial: a ideia é “cortar” e exibir o slide atual ao abrir a imagem seguinte ou anterior. Usando animação JQuery e CSS, podemos criar efeitos de transição exclusivos:

• Design adaptativo;
• Transição dividida;
• Controle deslizante de tela cheia.

Demonstração |Baixar

Unislider - um controle deslizante jQuery muito pequeno

Sem sinos e assobios desnecessários, com tamanho inferior a 3 KB. Use qualquer código HTML para seus slides, estenda-o com CSS. Tudo relacionado ao Unslider está hospedado no GitHub:

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

Demonstração | Download

Slides responsivos mínimos

Um plugin simples e compacto (apenas 1 KB de tamanho) que cria um controle deslizante responsivo usando elementos dentro de um contêiner. ResponsiveSLides.js funciona com uma ampla variedade de navegadores, incluindo todas as versões do IE do IE6 e superiores:

• Totalmente responsivo;
• Tamanho 1KB;
• Transições CSS3 com capacidade de execução via JavaScript;
• Marcação simples usando listas com marcadores;
• Capacidade de personalizar efeitos de transição e duração de visualização de um slide;
• Suporta a capacidade de criar várias apresentações de slides;
• Rolagem automática e manual.

Demonstração |Baixar

Câmera - controle deslizante jQuery gratuito

Camera é um plugin com muitos efeitos de transição e um layout responsivo. Fácil de configurar, compatível com dispositivos móveis:

• Design totalmente responsivo;
• Assinaturas;
• Capacidade de adicionar vídeos;
• 33 ícones de cores diferentes.

Demonstração |Baixar

SlidesJS, plugin jQuery responsivo

SlidesJS é um plugin responsivo para JQuery (1.7.1 e superior) com suporte para dispositivos de toque e transições CSS3. Experimente, experimente alguns exemplos prontos que o ajudarão a descobrir como adicionar SlidesJS ao seu projeto:

• Design adaptativo;
• Transições CSS3;
• Suporte para dispositivos sensíveis ao toque;
• Fácil de configurar.

Demonstração | Download

Controle deslizante BX Jquery

Este é um controle deslizante jQuery responsivo gratuito:

• Totalmente responsivo – adapta-se a qualquer dispositivo;
• Mudança de slide horizontal e vertical;
• Os slides podem conter imagens, vídeos ou conteúdo HTML;
• Suporte expandido para dispositivos sensíveis ao toque;
• Utilização de transições CSS para animação de slides (aceleração de hardware);
• Callbacks de API e métodos totalmente públicos;
• Tamanho de arquivo pequeno;
• Fácil de implementar.

Demonstração |Baixar

FlexSlider 2

O melhor controle deslizante responsivo. A nova versão foi aprimorada para aumentar a velocidade e a compactação.

Demonstração | Download

Galleria - galeria de fotos responsiva baseada em JavaScript

Galleria é usada em milhões de sites para criar galerias de imagens de alta qualidade. O número de críticas positivas sobre seu trabalho é simplesmente extraordinário:

• Totalmente grátis;
• Modo de visualização em tela cheia;
• 100% adaptativo;
• Não é necessária experiência em programação;
• Suporte para iPhone, iPad e outros dispositivos sensíveis ao toque;
• Flickr, Vimeo, YouTube e muito mais;
• Vários tópicos.

Demonstração | Download

Blueberry - um controle deslizante de imagem jQuery simples e responsivo

Apresento a vocês um controle deslizante de imagem jQuery escrito especificamente para web design responsivo. Blueberry é um plugin experimental de controle deslizante de imagem de código aberto que foi escrito especificamente para funcionar com modelos responsivos.