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

Controle deslizante responsivo Jssor

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 de código fonte 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;
• Projeto 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 simples

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 conteúdo tipos diferentes: imagens, Vídeo 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, cegar) 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 requisitos mínimos para criar um design simples de loja online em que os elementos “voadores” representem 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 ao tamanho da tela 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 inteira.

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 usando 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

Plugin simples e compacto ( o tamanho é de apenas 1 KB), 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;
• Usando transições CSS para animação de slides ( aceleração de hardware);
• API de retorno de chamada e métodos totalmente públicos;
• Tamanho de arquivo pequeno;
• Fácil de implementar.

Demonstração |Baixar

FlexSlider 2

O melhor controle deslizante responsivo. Nova versão foi modificado para aumentar a velocidade e 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 em 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.

Coleção de graça Controle deslizante HTML e CSS exemplos de código: cartão, comparação, tela cheia, responsivo, simples, etc. Atualização da coleção junho 2018. 7 novos itens.

Índice

Artigos relacionados

Sobre o código

Um conjunto de telas de integração em HTML/CSS/JS. Uma experiência pessoal com camadas de ícones PNG, transições CSS3 e flexbox.

Controle deslizante do cartão de informações HTML, CSS e JavaScript.
Feito por Andy Tran
23 de novembro de 2015

Controle deslizante de fotos funcionando em navegadores de desktop e dispositivos móveis.
Feito por Taron
29 de setembro de 2014

Controles deslizantes de comparação (antes/depois)

Sobre o código

Um controle deslizante de comparação de imagens simples e limpo, totalmente responsivo e pronto para toque, feito com CSS e jQuery.

Sobre o código

Um controle deslizante antes e depois apenas com html e css.

Sobre o código

Brincando com uma nova ideia usando meu controle deslizante de imagem antes/depois de duas camadas. Mantendo-o mínimo. Mantendo a baunilha. Curta se for útil :)

Vanilla JS, mínimo, bonito de se ver.
Feito por Huw
3 de julho de 2017

Sobre o código

Um elemento deslizante de "tela dividida" com JavaScript.

Um pequeno experimento para um controle deslizante antes e depois dentro de um SVG. O mascaramento torna tudo muito simples. Como é tudo SVG, as imagens e as legendas combinam perfeitamente. Os plugins Draggable e ThrowProps do GreenSock foram usados ​​para o controle deslizante.
Feito por Craig Roblewsky
17 de abril de 2017

Usa entrada de intervalo personalizado para controle deslizante.
Feito por Dudley Storey
14 de outubro de 2016

Controle deslizante de comparação de imagens responsivo com HTML, CSS e JavaScript.
Feito por Ege Görgülü
3 de agosto de 2016

Controle deslizante de comparação antes e depois de vídeo HTML5, CSS3 e JavaScript.
Feito por Dudley Storey
24 de abril de 2016

Um prático controle deslizante arrastável para comparar rapidamente 2 imagens, desenvolvido com CSS3 e jQuery.
Feito por CodyHouse
15 de setembro de 2014

Controles deslizantes em tela cheia

Sobre o código

Controle deslizante simples baseado em entradas de rádio. HTML + CSS 100% puro. Funciona também com teclas de seta.

Responsivo: sim

Dependências: -

Sobre o código

Belo efeito de transição para controle deslizante em tela cheia.

Sobre o código

Controle deslizante de paralaxe horizontal com Swiper.js.

Sobre o código

Controle deslizante de perspectiva 3D suave e responsivo ao mover o mouse.

Controle deslizante de imagem herói em tela cheia (tema de painéis deslizantes) com HTML, CSS e JavaScript.
Feito por Tobias Bogliolo
25 de junho de 2017

Uma interação de controle deslizante usando efeitos de velocidade e velocidade (UI Pack) para aprimorar a animação. A animação é acionada por meio de teclas de seta, clique de navegação ou conector de rolagem. Esta versão inclui bordas como parte da interação.
Feito por Stephen Scaff
11 de maio de 2017

Controle deslizante simples em estilo minimalista para exibir imagens. Parte da imagem aparece em cada slide.
Feito por Nathan Taylor
22 de janeiro de 2017

A coisa é muito fácil de personalizar. Você pode alterar com segurança a fonte, o tamanho da fonte, a cor da fonte e a velocidade da animação. A primeira letra de uma nova string no array em JS aparecerá em um novo slide. Fácil de criar (ou excluir) um novo slide: 1. Adicione uma nova cidade no array em JS. 2. Altere a variável número de slides e coloque uma nova imagem na lista scss em CSS.
Feito por Ruslan Pivovarov
8 de outubro de 2016

1. Caminho de clipe para borda retangular de mascaramento de imagem (somente webkit).
2. Modo de mesclagem para esta máscara.
3. Sistema de cores inteligente, basta colocar o nome e o valor da cor no mapa atrevido e adicionar a classe adequada com esse nome de cor aos elementos e tudo funcionará!
4. Menu lateral de créditos legais (clique no pequeno botão no centro da demonstração).
5. Vanilla js com apenas< 200 lines of code (basically it’s just adds/removes classes).

Este controle deslizante distorcido com rolagem baseado em JS e CSS puro (sem bibliotecas).
Feito por Victor Belozyorov
3 de setembro de 2016

Uma animação deslizante com design de Pokémon.
Feito por Pham Mikun
18 de agosto de 2016

Controle deslizante HTML, CSS e JavaScritp com animação complexa e texto em ângulo meio colorido.
Feito por Ruslan Pivovarov
13 de julho de 2016

Efeito de paralaxe deslizante com HTML, CSS e JavaScript.
Feito por Manuel Madeira
28 de junho de 2016

Controle deslizante HTML, CSS e JavaScript com efeito cascata.
Feito por Pedro Castro
21 de maio de 2016

Controle deslizante revelador do Clip-Path com HTML, CSS e JavaScript.
Feito por Nikolai Talanov
16 de maio de 2016

Controle deslizante GSAP + Slick com visualização dos slides anteriores/seguintes.
Feito por Karlo Videk
27 de abril de 2016

Controle deslizante de página inteira HTML, CSS e JavaScript.
Feito por Joseph Martucci
28 de fevereiro de 2016

Protótipo de controle deslizante completo com HTML, CSS e JavaScript.
Feito por Gluber Sampaio
6 de janeiro de 2016

Uma apresentação de slides em tela cheia, meio responsiva, animada com Greensocks TweenLite/Tweenmax.
Feito por Arden
12 de dezembro de 2015

Controle deslizante de tela inteira (linha do tempo GSAP) nº 1 com HTML, CSS e JavaScript.
Feito por Diaco M.Lotfollahi
23 de novembro de 2015

Controle deslizante HTML e CSS com efeitos personalizados.
Feito por Nikolai Talanov
12 de novembro de 2015

Controle deslizante de tela cheia com paralaxe com HTML, CSS e JavaScript.
Feito por Nikolai Talanov
12 de novembro de 2015

Controle deslizante giratório de prova de conceito. Usa clip-path e muita matemática.
Feito por Tyler Johnson
16 de abril de 2015

Um controle deslizante CSS e jQuery simples em tela cheia usando a suavidade do translateX e do translate3d!
Feito por José
19 de agosto de 2014

Controles deslizantes responsivos

Sobre o código

Controle deslizante de opacidade de imagens

Controle deslizante de opacidade de imagens em HTML e CSS.

Navegadores compatíveis: Chrome, Edge, Firefox, Opera, Safari

Responsivo: sim

Dependências: -

Sobre o código

Layout de slides flexíveis empilhados

Este exemplo ilustra como criar layout de slides empilhados uns sobre os outros (especialmente útil para transições fade in/out). Isso é conseguido sem definir sua altura e evitando a posição: absoluta; portanto, são totalmente flexíveis e fáceis de manter no fluxo normal da página.

Navegadores compatíveis: Chrome, Edge, Firefox, Opera, Safari

Responsivo: sim

Dependências: -

Sobre o código

Controle deslizante responsivo

Controle deslizante responsivo animado em HTML, CSS e JavaScript.

Navegadores compatíveis: Chrome, Edge, Firefox, Opera, Safari

Responsivo: sim

Dependências: animate.css

Sobre o código

Controle deslizante com texto mascarado

Controle deslizante somente CSS com texto mascarado.

Navegadores compatíveis: Chrome, Edge (parcial), Firefox, Opera, Safari

Responsivo: sim

Dependências: -

Sobre o código

Imagem e conteúdo com efeito de paralaxe.

Sobre o código

Galeria de slides somente CSS.

Navegadores compatíveis: Chrome, Edge, Firefox, Opera, Safari

Responsivo: sim

Dependências: -

Sobre o código

Controle deslizante HTML/CSS puro

Controle deslizante HTML/CSS puro com barra de progresso SVG circular.

Navegadores compatíveis: Chrome, Edge (parcial), Firefox (parcial), Opera, Safari

Responsivo: sim

Dependências: font-awesome.css

Sobre o código

Um experimento para criar um controle deslizante vertical totalmente responsivo com miniaturas usando apenas CSS e mantendo a proporção das imagens.

Sobre o código

Um controle deslizante/carrossel de imagem Flexbox simples feito com JavaScript vanilla.

Sobre o código

Este é um experimento que simula um efeito de desfoque de movimento toda vez que um slide é alternado. Ele aproveita o filtro SVG Gaussian Blur e algumas animações de quadros-chave CSS. Embora o efeito não exija nenhum Javascript para funcionar corretamente, neste exemplo o Javascript é usado apenas para a funcionalidade do controle deslizante.

Sobre o código

Cool anima o controle deslizante com JS.

Sobre o código

Este é um experimento sobre como os padrões SVG podem nos ajudar a criar imagens semelhantes a máscaras para um controle deslizante de imagem somente CSS.

Explorando algumas transições de controle deslizante. Controle deslizante de deslizamento com opção de paralaxe habilitada. Brincando principalmente com filtros CSS aqui.
Feito por Mirko Zorić
12 de junho de 2017

Controle deslizante GSAP simples com algumas animações sutis de interpolação.
Feito por Goran Vrban
9 de junho de 2017

UI deslizante com HTML, CSS e JavaScript.
Feito por Mergim Ujkani
6 de junho de 2017

Controle deslizante GSAP versão 2.
Feito por Em An
4 de maio de 2017

Um pequeno controle deslizante de transição usando um simples acordo de adição de classe. É necessário suavizar um pouco os tempos e decidir sobre a melhor abordagem para dispositivos móveis (apenas empilhar, adicionar eventos de toque, tornar as imagens na janela de visualização completa, etc. Suporta roda de rolagem (scroll jacking), botões de navegação e teclas de seta. Também pode aumentar o wrapper de conteúdo para fazer com que as imagens preencham a janela de visualização em seu estado sem animação, o que também é muito legal.
Feito por Stephen Scaff
3 de janeiro de 2017

Imagem de borda e caminho de clipe CSS aproveitados para criar um efeito de animação de controle deslizante.
Feito por Emily Hayman
31 de dezembro de 2016

Pequeno controle deslizante construído com flexbox. Bastante responsivo e pode ter elementos fixos ao lado da área do controle deslizante.
Feito por Roberto
28 de novembro de 2016

HTML, controle deslizante de tela CSS.
Feito por Nvagelis
29 de outubro de 2016

Controle deslizante suave HTML, CSS e JavaScript 3D.
Feito por Eduardo Allegrini
19 de outubro de 2016

Controle deslizante de cupcake HTML e CSS com granulado!
Feito por Jamie Coulter
14 de outubro de 2016

Feito por Mario's Maselli
12 de outubro de 2016

Explorando a animação da UI nº 2 com HTML, CSS e JavaScript.
Feito por Mario's Maselli
22 de setembro de 2016

Explorando a animação da UI nº 3 com HTML, CSS e JavaScript.
Feito por Mario's Maselli
22 de setembro de 2016

Slider de comércio eletrônico v2.0 com HTML, CSS e JavaScript.
Feito por Pedro Castro
17 de setembro de 2016

Controle deslizante limpo HTML, CSS e JavaScript com fundo curvo.
Feito por Ruslan Pivovarov
13 de setembro de 2016

Explorando a animação da UI nº 1 com HTML, CSS e JavaScript.
Feito por Mario's Maselli
8 de setembro de 2016

Aproveite o poder do CSS: para cima e para baixo em cada imagem do meio e controle deslizante paginado com lightbox.
Feito por Kseso
15 de agosto de 2016

A dupla exposição é uma técnica fotográfica que combina 2 imagens diferentes em uma única imagem.
Feito por Misaki Nakano
3 de agosto de 2016

Controle deslizante usando clipe de propriedade CSS3.
Feito por Pedro Castro
1º de maio de 2016

Controle deslizante CSS responsivo.
Feito por geekwen
19 de abril de 2016

Este é um experimento simples de controle deslizante que exibe palavras com belos significados que não podem ser traduzidas diretamente. Foco: tipografia elegante e transições simples, mas atraentes.
Feito por Joe Harry
5 de abril de 2016

A ideia da animação é alterar o valor do clip path CSS, fazendo assim um efeito de mascaramento.
Feito por Bhakti Al Akbar
31 de março de 2016

Controle deslizante de pontos com HTML, CSS e JavaScript.
Feito por Derek Nguyen
16 de março de 2016

Controle deslizante de efeito prisma com HTML, CSS e JavaScript.
Feito por Victor
12 de março de 2016

Galeria de fundo deslizante com HTML, CSS e JavaScript.
Feito por Ron Gierlach
30 de novembro de 2015

Solução de controle deslizante HTML, CSS e JavaScript.
Feito por Jürgen Genser
30 de setembro de 2015

Um controle deslizante de produto desenvolvido por Sequence.js. Sequence.js – A estrutura de animação CSS responsiva para criar controles deslizantes, apresentações, banners e outros aplicativos exclusivos baseados em etapas.
Feito por Ian Lunn
15 de setembro de 2015

Controle deslizante personalizado de pequeno círculo.
Feito por Bram de Haan
11 de agosto de 2015

Controle deslizante GTA V responsivo com HTML, CSS e JavaScript.
Feito por Edward Mayer
24 de janeiro de 2014

É como um controle deslizante, mas gira de forma cúbica por razões desconhecidas.
Feito por Eric Brewer
4 de dezembro de 2013

Feito por Hugo Darby Brown
28 de agosto de 2013

Controles deslizantes simples

Controle deslizante de sobreposição de imagem com HTML, CSS e JavaScript vanilla.
Feito por Yugam
7 de junho de 2017

Controle deslizante de imagem em HTML e CSS.
Feito por Joshua Hibbert
16 de junho de 2016

Controle deslizante de imagem de vários eixos

Controle deslizante de imagem de vários eixos com HTML, CSS e JavaScript.
Feito por Burak Can
22 de julho de 2013

Controle deslizante de cubo, um pequeno experimento com transformações 3D HTML5/CSS3.
Feito por Ilya K.
26 de junho de 2013

Atualmente, um controle deslizante - carrossel - é uma funcionalidade simplesmente necessária em um site de negócios, site de portfólio ou qualquer outro recurso. Junto com os controles deslizantes de imagem em tela cheia, os controles deslizantes horizontais do carrossel se adaptam bem a qualquer web design.

Às vezes, o controle deslizante deve ocupar um terço da página do site. Aqui, o controle deslizante do carrossel é usado com efeitos de transição e layouts responsivos. Os sites de comércio eletrônico usam um controle deslizante de carrossel para exibir muitas fotos em publicações individuais ou páginas. O código do controle deslizante pode ser usado e modificado livremente de acordo com suas necessidades.

Usando JQuery junto com HTML5 E CSS3, você pode tornar suas páginas mais interessantes proporcionando-lhes efeitos únicos e chamando a atenção dos visitantes para uma área específica do site.

Slick – plugin moderno de controle deslizante de carrossel

Lisoé um plugin jquery distribuído gratuitamente cujos desenvolvedores afirmam que sua solução irá satisfazer todos os seus requisitos de controle deslizante. Controle deslizante adaptável – o carrossel pode funcionar em “ azulejos"para dispositivos móveis e, no " arrastar e soltar"para a versão desktop.

Contém um efeito de transição " atenuação», oportunidade interessante « modo central", carregamento lento de imagens com rolagem automática. A funcionalidade atualizada inclui a adição de slides e um filtro de slides. Tudo para garantir que você configure o plugin de acordo com suas necessidades.

Owl Carousel 2.0 – jQuery – plugin para uso em dispositivos touch

Este plugin possui um grande conjunto de funções, adequado tanto para iniciantes quanto para desenvolvedores experientes. Esta é uma versão atualizada do controle deslizante do carrossel. Seu antecessor tinha o mesmo nome.

O controle deslizante possui alguns plug-ins integrados para melhorar a funcionalidade geral. Animação, reprodução de vídeo, reprodução automática de controle deslizante, carregamento lento, ajuste automático de altura são os principais recursos.

Suporte a recursos arrastar e soltar incluído para uso mais conveniente do plugin em dispositivos móveis.
O plugin é perfeito para exibir imagens grandes mesmo em telas pequenas de dispositivos móveis.

Um plugin jquery bastante pequeno, mas funcionalmente rico, que permite colocar um controle deslizante em uma página - um carrossel, que possui um núcleo pequeno e não consome muitos recursos do site. O plugin pode ser utilizado para exibir sliders verticais e horizontais, com animação e criar conjuntos de imagens da galeria.

AnoSlide – controle deslizante jQuery ultracompacto e responsivo

Ultracompacto controle deslizante jQuery– um carrossel, cuja funcionalidade é muito maior do que a de um controle deslizante normal. Isso inclui visualização de imagem única, exibição em carrossel de múltiplas imagens e exibição de controle deslizante baseado em título.

Carrossel de coruja – controle deslizante Jquery – carrossel

– controle deslizante com suporte telas sensíveis ao toque e tecnologia arrastar e soltar, facilmente integrado em HTML– código. O plugin é um dos melhores controles deslizantes que permite criar lindos carrosséis sem qualquer marcação especialmente preparada.

Galeria 3D – carrossel

Usos 3D– transições baseadas em CSS– estilos e um pouco JavaScript código.

Magnífico carrossel 3D. Parece que esta ainda é uma versão beta, porque descobri alguns problemas com ela agora há pouco. Se você estiver interessado em testar e criar seus próprios controles deslizantes, este carrossel será de grande ajuda.

Carrossel usando bootstrap

Slider responsivo – Carrossel usando a tecnologia certa para o seu novo site.

Controle deslizante do carrossel Moving Box baseado na estrutura Bootstrap

Mais popular em sites de portfólio e negócios. Este tipo de controle deslizante – carrossel – é frequentemente encontrado em sites de qualquer tipo.

Este pequeno controle deslizante está pronto para funcionar em dispositivos com qualquer resolução de tela. O controle deslizante pode funcionar nos modos circular e carrossel. Círculo minúsculo apresentado como uma alternativa a outros controles deslizantes deste tipo. Suporte integrado disponível sistemas operacionais iOS E Android.

No modo circular, o controle deslizante parece bastante interessante. Excelente suporte ao método arrastar e soltar e um sistema automático de rolagem de slides.

Um controle deslizante de carrossel poderoso e adaptável é perfeito para um site moderno. Funciona corretamente em qualquer dispositivo. Possui modos horizontal e vertical. Seu tamanho é minimizado para apenas 1 KB. O plugin ultracompacto também possui excelentes transições suaves.

Uau – controle deslizante – carrossel

Contém mais de 50 efeitos, que podem ajudá-lo a criar um controle deslizante original para o seu site.

Redimensione a janela do navegador para ver como o controle deslizante se adapta. Bxslider vem com mais de 50 opções de personalização e apresenta seus recursos com vários efeitos de transição.

jCarrossel - jQuery um plugin que ajudará a organizar a visualização de suas imagens. Você pode criar facilmente carrosséis de imagens personalizados a partir da base mostrada no exemplo. O controle deslizante é adaptável e otimizado para funcionar em plataformas móveis.

Scrollbox – plugin jQuery

Caixa de rolagem plugin compacto para criar um controle deslizante - carrossel ou ticker de texto. Os principais recursos incluem efeitos de rolagem vertical e horizontal com pausa ao passar o mouse.

Um controle deslizante de carrossel simples. Se você precisa de um plugin rápido, este é 100% adequado. Vem com apenas os recursos básicos necessários para o controle deslizante funcionar.

Flexisel: plug-in de controle deslizante de carrossel JQuery responsivo

Os criadores se inspiraram em um plugin old school, fazendo uma cópia dele com o objetivo de garantir o correto funcionamento do controle deslizante em dispositivos móveis e tablets.

Um layout responsivo, quando executado em dispositivos móveis, é diferente de um layout orientado ao tamanho da janela do navegador.

perfeitamente adaptado para funcionar em telas de baixa e alta resolução.

Elastislide – controle deslizante adaptativo – carrossel

Adapta-se perfeitamente ao tamanho da tela do dispositivo. Você pode definir o número mínimo de imagens a serem exibidas em uma resolução específica. Funciona bem como um controle deslizante de carrossel com galerias de imagens, usando um wrapper fixo junto com um efeito de rolagem vertical. Controle deslizante disponível gratuitamente em Woothemes

. É justamente considerado um dos melhores controles deslizantes adaptativos. O plugin contém vários modelos e será útil tanto para usuários novatos quanto para especialistas.

Carrossel incrível Carrossel incrível – controle deslizante de imagem adaptável ativado jQuery . Suporta muitos sistemas de gerenciamento de conteúdo, como, WordPress E Drupal Joomla Android E iOS. Também suporta

e versões desktop de sistemas operacionais sem quaisquer problemas de compatibilidade. Modelos de carrossel incríveis integrados permitem que você use o controle deslizante nos modos vertical, horizontal e circular.

Neste tutorial, criaremos uma página de cabeçalho responsiva simples decorada com um carrossel no qual as imagens deslizam da direita para a esquerda. Nossa solução não utiliza JavaScript, a apresentação de slides é baseada em animações CSS3, que são suportadas na maioria dos navegadores modernos: Firefox 15+, Chrome 22+, Safari 5.1+, Opera 12.1+ e IE10.

Passo 1 – Preparatório Precisaremos de 4 imagens grandes (no nosso exemplo o tamanho é 1200px x 390px). Para um controle deslizante horizontal, prepararemos uma imagem de 4800px x 390px no Photoshop, colocaremos todas as nossas imagens uma após a outra horizontalmente e salvaremos o resultado em um formato adequado para a web (“”).

slider-horizontal.jpg

Passo 2 – HTML

L'ile de Batz

Bares e restaurantes

Começaremos a definir estilos para dispositivos móveis. Vamos definir o design básico e depois adicionar extensões de modelo para telas maiores. O texto da lição fornece apenas as propriedades básicas; o código completo pode ser visualizado no código-fonte:

Corpo (largura: 90%; largura mínima: 300px; largura máxima: 1200px; margem: 0 automático; preenchimento superior: 1em; cor: #504331) cabeçalho (alinhamento de texto: centro; posição: relativo;) h1 ( tamanho da fonte: 2,75em; fundo: branco; preenchimento: 0 10px; borda inferior: 0,25em; ; images/map.png) centro inferior sem repetição;

Etapa 4. Estilos para telas grandes

Seções em telas grandes .principal E .tela deve ser exibido de forma diferente. Seção .link terá 300px de largura e será posicionado como a barra lateral direita, e a seção .principal permanecerá à esquerda. Também adicionaremos uma linha dupla para separar as seções. Determinaremos a largura da tela maior que 1024px usando a consulta @media:

Tela somente @media e (largura mínima: 1024px) ( .content ( posição: relativa; ) .main ( margem direita: 320px; preenchimento: .5em 20px .5em 0; /*adicionar uma linha dupla */ borda direita : 1px sólido #504331; box-shadow: 2px 0 branco, 3px 0 #504331;

Etapa 5: imagens de cabeçalho responsivas

Vamos começar a trabalhar na parte principal da nossa lição: um controle deslizante CSS responsivo no cabeçalho. Primeiro, vamos tornar a imagem de fundo responsiva.

Cabeçalho ( background: url(../images/slider-horizontal.jpg) 0 bottom repeat-x; background-size: 400%; padding-bottom: 32,5%; )

Usando dois valores percentuais (400% para propriedade tamanho de fundo e 32,5% para a margem inferior) o fundo do cabeçalho será exibido corretamente independentemente do tamanho da tela.

Por que 400%? Temos 4 slides, então a exibição será 1/4 da imagem de fundo do cabeçalho. Ou seja, o tamanho do fundo deve ser 4 vezes maior que o cabeçalho.

Por que 32,5%? Posicionamos nosso plano de fundo na parte inferior do cabeçalho. A altura da imagem de fundo é 390px, a largura do slide individual é 1200px, 390/1200 = 0,325, então a altura é 32,5% da largura.

Passo 6. Animação

Vamos animar a propriedade posição de fundo. Para exibir a segunda propriedade da imagem posição de fundo deveria importar 33,33333% inferior, terceiro - 66,66667% inferior, e o quarto - 100% inferior. A primeira imagem é exibida quando o valor da propriedade é posição de fundo igual 0 inferior ou 133,33333% inferior(definimos as repetições para repetir-x).

Cada imagem possui 25% do tempo de “fama”. O primeiro é exibido de 0 a 25%, o segundo de 25% a 50%, o terceiro de 50% a 75% e o último de 75% a 100%. Definimos as transições para que a imagem comece a deslizar um pouco mais cedo (usando um valor de 5%) antes que 25% do seu tempo de renderização tenha decorrido. Isto é o que parece @quadros-chave:

@keyframes h_slide ( 0% ( posição de fundo: 0% inferior; ) 20% ( posição de fundo: 0% inferior; ) 25% ( posição de fundo: 33,33333% inferior; ) 45% ( posição de fundo: 33,33333% inferior ; ) 50% (posição de fundo: 66,66667% inferior; ) 70% (posição de fundo: 66,66667% inferior; ) 75% (posição de fundo: 100% inferior; ) 95% (posição de fundo: 100% inferior; ) 100% ( posição de fundo: 133,33% inferior; ) )

Observe que você precisa adicionar prefixos de navegador: @-webkit-keyframes (para Chrome, Safari, iOS Safari, Android) e @-moz-keyframes (para Firefox 15).

Abaixo está o código completo do cabeçalho. Nossa animação “h_slide” se repete a cada 24 segundos (6 segundos para cada slide) em um loop infinito. A função do tempo é importante relaxar, para que cada slide fique mais lento no final da transição.

Cabeçalho (alinhamento de texto: centro; posição: relativo; plano de fundo: url(../images/slider-horizontal.jpg) 0 repetição inferior-x; tamanho de fundo: 400%; preenchimento inferior: 32,5%; -webkit- animação: h_slide 24s atenuação infinita -moz-animation: h_slide 24s atenuação infinita animação: h_slide 24s atenuação infinita)

O tempo não pára e com ele o progresso. Isso também afetou a Internet. Você já pode ver como a aparência dos sites está mudando; o design adaptativo é especialmente popular. E a este respeito, alguns novos apareceram controles deslizantes jquery adaptáveis, galerias, carrosséis ou plug-ins semelhantes.
1. Controle deslizante de postagens horizontais responsivas

Carrossel horizontal adaptável com instruções detalhadas na instalação. É feito em um estilo simples, mas você pode estilizá-lo como quiser.

2. Controle deslizante em Glide.js

Este controle deslizante é adequado para qualquer site. Ele usa Glide.js de código aberto. As cores do controle deslizante podem ser facilmente alteradas.

3. Apresentação de slides de conteúdo inclinado

Controle deslizante de conteúdo responsivo. O destaque deste controle deslizante é o efeito 3D das imagens, além de diversas animações de aparência aleatória.

4. Controle deslizante usando tela HTML5

Um controle deslizante muito bonito e impressionante com partículas interativas. Foi feito usando canvas HTML5,

5. Controle deslizante de transformação de imagem

Controle deslizante com efeito de metamorfose (transformação suave de um objeto para outro). Neste exemplo, o controle deslizante é adequado para o portfólio de um desenvolvedor web ou estúdio web na forma de portfólio.

6. Controle deslizante circular

Controle deslizante em forma de círculo com efeito de virar a imagem.

7. Controle deslizante com fundo desfocado

Controle deslizante adaptável com alternância e desfoque de fundo.

8. Controle deslizante de moda responsivo

Controle deslizante de site simples, leve e responsivo.

9. Slicebox - controle deslizante de imagem jQuery 3D(ATUALIZADO)

Versão atualizada do controle deslizante Slicebox com correções e novos recursos.

10. Grade de imagem responsiva animada gratuita

Plug-in JQuery para criar uma grade de imagem flexível que alternará as fotos usando diferentes animações e tempos. Isso pode ficar bem como plano de fundo ou elemento decorativo em um site, pois podemos aparecer seletivamente novas imagens e suas transições. O plugin vem em várias versões.

11. Controle deslizante flexível

Um plugin universal gratuito para o seu site. Este plugin vem em várias opções de controle deslizante e carrossel.

12. Moldura para fotos

Fotoramaé um plugin universal. Possui diversas configurações, tudo funciona de forma rápida e fácil e você pode visualizar os slides em tela cheia. O controle deslizante pode ser usado tanto em tamanho fixo quanto adaptativo, com ou sem miniaturas, com ou sem rolagem circular e muito mais.

P.S.Instalei o controle deslizante várias vezes e acho que é um dos melhores

13. Galeria deslizante 3D gratuita e adaptável com miniaturas.

Controle deslizante da galeria experimental Layout do painel 3DP com uma grade e efeitos de animação interessantes.

14. Controle deslizante em css3

O controle deslizante adaptativo é feito em css3 com aparência suave de conteúdo e animação leve.

15. Controle deslizante Uau

Controle deslizante UAUé um controle deslizante de imagem com efeitos visuais incríveis.

17. Elástico

Controle deslizante elástico com capacidade de resposta total e miniaturas de slides.

18. Fenda

Este é um controle deslizante responsivo em tela cheia usando animação CSS3. O controle deslizante é feito em duas versões. A animação é feita de maneira incomum e bonita.

19. Galeria de fotos adaptável plus

Simples controle deslizante grátis-galeria com carregamento de imagens.

20. Controle deslizante responsivo para WordPress

Controle deslizante gratuito adaptável para WP.

21. Controle deslizante de conteúdo paralaxe

Slider com efeito de paralaxe e controle de cada elemento usando CSS3.

22. Controle deslizante com link de música

Slider usando código-fonte aberto JPlayer. Este controle deslizante lembra uma apresentação com música.

23. Controle deslizante com jmpress.js

O controle deslizante responsivo é baseado em jmpress.js e, portanto, permitirá adicionar alguns efeitos 3D interessantes aos seus slides.

24. Apresentação de slides rápida

Apresentação de slides com troca rápida de slides. Os slides ativam o foco.

25. Acordeão de imagem com CSS3

Acordeão de imagem usando css3.

26. Um plug-in de galeria otimizado para toque

Esta é uma galeria responsiva otimizada para dispositivos sensíveis ao toque.

27. Galeria 3D

Galeria de parede 3D- criado para o navegador Safari, onde o efeito 3D ficará visível. Se você olhar em outro navegador, a funcionalidade ficará boa, mas o efeito 3D não será visível.

28. Controle deslizante com paginação

Controle deslizante responsivo com paginação usando controle deslizante JQuery UI. A ideia é usar um conceito de navegação simples. É possível retroceder todas as imagens ou alternar slide a slide.

29.Montagem de imagens com jQuery

Organize imagens automaticamente dependendo da largura da tela. Uma coisa muito útil no desenvolvimento de um site de portfólio.

30. Galeria 3D

Um controle deslizante circular 3D simples usando css3 e jQuery.

31. Modo tela cheia com efeito 3D usando css3 e jQuery

Um controle deslizante com capacidade de visualizar imagens em tela inteira com uma bela transição.