Uma seleção de controles deslizantes adaptáveis. Um controle deslizante interessante no plugin jQuery jQuery “Scale Carousel”

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 jQuery CSS3

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, ou seja.

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 opções possíveis usando este plug-in.

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

Fácil Plug-in jQuery em vários designs. 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 “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 ter o formato de: 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 leve 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 mudança automática 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 “Controle deslizante de fluxo”

Controle deslizante com muitos efeitos de mudança de imagem.

41. Controle deslizante jQuery simples

Controle deslizante de imagem elegante usando jQuery.

Temdo Slider é uma ferramenta poderosa e fácil de usar para criar lindos controles deslizantes para o seu site. Principais características do controle deslizante:

• Você pode escolher qualquer imagem ou vídeo como plano de fundo para cada slide.
• Imagem de sobreposição adicional
• Animação de rolagem
• Animação ao mudar de slide

Se você precisa criar um lindo controle deslizante "clássico" (fundo, não mais que duas camadas gráficas adicionais, título, subtítulo, texto e não mais que dois botões em cada slide), é recomendado usar o Temdo Slider, especialmente se você precisar controles deslizantes de tela cheia e vídeos de fundo.

Criando um controle deslizante

Para criar um novo controle deslizante, no menu esquerdo do painel do WordPress, selecione Controle deslizante > Adicione um novo slide:

Tipo de slide

A configuração básica do slide é o tipo de plano de fundo (imagem ou vídeo). Dependendo da escolha deste parâmetro, a interface de configurações do slide muda: ao selecionar um vídeo em vez de um grupo de configurações Fundo estático um grupo aparece Fundo animado.

Plano de fundo do slide

Selecione uma imagem de fundo para o seu slide. Lembre-se de que a imagem de fundo será esticada para preencher toda a largura da tela (mantendo a proporção). Portanto, é recomendável usar imagens Resolução total HD (1920 x 1080 pixels). Se quiser que o controle deslizante não ocupe toda a altura da tela, você precisa definir a altura nas configurações do controle deslizante.

Imagem de sobreposição

Use esta opção para sobrepor uma imagem adicional com um fundo transparente ou semitransparente sobre a imagem de fundo principal. A imagem sobreposta será replicada em toda a superfície do slide como uma textura.

Animação de fundo

Habilite esta opção se desejar animar a imagem de fundo. Uma vez ativado, os seguintes tipos de animação ficam disponíveis:

• Ampliação relativa ao centro (padrão)
• Ampliação relativa ao canto superior esquerdo
• Ampliação relativa ao canto superior direito
• Ampliação relativa ao canto inferior esquerdo
• Ampliação relativa ao canto inferior direito

Vídeo de fundo

O controle deslizante Temdo suporta os formatos de vídeo webm, mp4 e ogg.

Para usar um vídeo como plano de fundo, primeiro você deve carregá-lo na biblioteca de mídia do seu site. Para fazer isso, no painel esquerdo do console do WordPress, selecione o item Arquivos de mídia > Adicionar novo. Assim que o download do vídeo terminar, copie seu URL para a área de transferência e volte para a edição do slide. Cole o caminho para o arquivo de vídeo da área de transferência na seção apropriada das configurações do slide. É recomendável usar vídeo em todos os três formatos sempre que possível para oferecer suporte ao maior número possível de navegadores modernos.

Propriedades do slide

Esta seção define os parâmetros básicos do slide:

• Design do cabeçalho: você pode escolher um design claro para combinar com um fundo escuro ou um design escuro para contrastar o cabeçalho com um fundo claro.
• Cor de navegação: escolha uma cor para as setas esquerda-direita e pontos de navegação na parte inferior do controle deslizante
• Rolar para uma seção: mostra uma seta que, ao ser clicada, rolará a página até o local especificado. Insira um nome para a âncora, por exemplo '#contact'
• Não mostrar título: Habilite esta opção se não quiser que o título seja exibido neste slide.
• Não mostrar sombra do título: desative a sombra do título deste slide.
• Animação gráfica: escolha entre dois efeitos de animação para o gráfico do seu slide
• Animação de conteúdo: escolha entre duas maneiras de animar seu título, subtítulo, texto e botões

Configurando o estilo do conteúdo do slide

As configurações de estilo do conteúdo do texto do slide (título, subtítulo e texto) são definidas nos grupos de configurações correspondentes:

• Título do slide
• Legenda do slide
• Texto do slide

Em cada um desses grupos, você pode definir a fonte, a cor, o tamanho e outros parâmetros de estilo para cada elemento.

Gráficos e gráficos SVG

Aqui você pode carregar um elemento gráfico adicional (), bem como gráficos vetoriais no formato SVG. Para cada um desses elementos, você pode definir um link que será aberto quando você clicar no elemento.

Botões no slide

Nesta seção você pode definir parâmetros para um ou dois botões:

• Texto do botão
• Link
• Animação flutuante
• Ícone

Animação de slide ao rolar

Nesta seção, você pode ativar e desativar a animação ao percorrer todo o conteúdo do slide ou elementos individuais deslizar. Se desejar (e puder), você pode produzir afinação animações usando estilos CSS.

Salvando um slide

Antes de salvar um slide, adicione-o a um ou mais controles deslizantes marcando as caixas apropriadas na seção Controles deslizantes. Se você ainda não tem nenhum controle deslizante, clique no link + Adicione um novo controle deslizante:

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 vêm com documentação detalhada, portanto, não é 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 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;
• 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 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 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 diferente: 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 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 controle deslizante adaptativo usando os elementos dentro do 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);
• 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. 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 código fonte, que foi escrito especificamente para funcionar com modelos responsivos.

Por favor, diga-me, é possível fazer um controle deslizante de imagem de fundo usando o controle deslizante liso?
O Google não ajuda (a documentação diz que as imagens precisam ser colocadas em um bloco div. Mas e as imagens de fundo?

@charset utf-8; html,corpo,div,span,applet,objeto,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pré,a, abbr,acrônimo,endereço,grande,citar,código,del,dfn, em, fonte, img, ins, kbd, q, s, samp, pequeno, greve, forte, sub, sup, tt, var, b, u, i, centro, dl, dt, dd, ol, ul, li, conjunto de campos, formulário, rótulo, legenda, tabela, legenda, tbody, tfoot, thead, tr, th, td (plano de fundo: nenhum repetir rolagem 0 0 transparente; borda: 0 nenhum; tamanho da fonte: 100%; contorno: 0 nenhum; alinhamento vertical: linha de base; margem: 0; preenchimento: 0;) tabela (colapso de borda: colapso; espaçamento de borda: 0;) endereço, artigo, aparte, tela, detalhes, figcaption, figura, rodapé, cabeçalho, hgroup, navegação, seção, resumo (exibição: bloco;) * ( -webkit-box-sizing:border-box; -moz-box-sizing:border-box; -ms-box-sizing:border-box; dimensionamento de caixa: border-box; ) a, a:hover, button, button:hover, .anime ( -moz-transition:todos os 200ms lineares; -ms-transition:todos os 200ms lineares; -o-transition:todos os 200ms lineares; -webkit- transição: todos os 200 ms lineares transição: todos os 200 ms lineares cursor: ponteiro) .F_COL_C-START_I-CENTER ( display: flex; flex-flow: coluna nowrap; 12vw;

Quando usados ​​separadamente, CSS3 e jQuery fornecem uma ampla gama de recursos. Mas se usados ​​juntos... Então eles podem tornar os efeitos realmente impressionantes. Às vezes surge o problema de como organizar melhor e de forma mais criativa várias imagens ou fotografias com um tema comum em um só lugar. Como opção, você pode criar um controle deslizante (especialmente porque há um grande número deles). Mas neste tutorial criaremos uma galeria 3D interativa usando CSS3 e jQuery. Para descobrir rapidamente e aplicar o controle deslizante em seu site, recomendo baixar a versão demo (também está disponível na notícia completa) e simplesmente fazer por analogia no exemplo.

Um exemplo real pode ser visto aqui:

Download

Parte HTML - controle deslizante jQuery interessante

Contêiner com classe principal será usado para exibir fundo. E então dentro do bloco com o identificador immersive_slider você pode adicionar quantos slides precisar. Os botões para navegar pelos slides podem ser removidos se você não precisar deles:

parte jQuery

Como você deve ter notado ao visualizar o exemplo do controle deslizante, existem diferentes arquivos . Todas as configurações para essas transições estão na função acima. Vejamos estas configurações:

• animação— um valor que determina como os slides serão alterados. Aceita os valores "fade", "slide" ou "bounce". E para fazer uma mudança vertical de slides, você precisa digitar “slideUp” ou “bounceUp”.
• slideSelector— um seletor para selecionar blocos com slides.
• recipiente— esta propriedade define o contêiner principal cujo plano de fundo será alterado.
• cssBlur Este é um recurso de teste. Se você não deseja definir o desfoque, não defina esta propriedade.
• paginação— ativa a navegação.
• início automático— início automático da apresentação de slides.