webmaster

24 Sliders Fantásticos Com jQuery

Olá, Somos criadores de conteúdo apaixonados por web design, programação, criação de websites e tecnologias digitais. O nosso website está online! Explore a nova versão beta, onde terá acesso a novos recursos e melhorias. A sua experiência e feedback são muito importantes para nós! Novos artigos, todas as semanas! Fique atento.
Artigos SEO

Artigos SEO

Search Engine Optimization

Artigos WordPress

Criação de websites.

Tutoriais

Ensino numa série de passos simples

24 Sliders Fantásticos Com jQuery

Publicamos um artigo mais atualizado (04 de Julho de 2013) com:

112 Sliders jQuery Espetaculares

A Vantagem De Usar Um Slider

Um slider é uma solução ótima para você exibir o conteúdo que você quer destacar, com a possibilidade de você conseguir mostrar vários artigos, tutoriais, fotos, imagens, produtos ou serviços no mesmo espaço, dado que existe uma rodagem desse conteúdo, que pode ser automática ou manual, através dum sistema de navegação simples, quase sempre constituído por setas, paginação ou imagens miniatura.

Todos sabemos que a parte do seu site ou blog que está visível no monitor do visitante, sem que seja necessário fazer scroll, é onde você tem que mostrar ao visitante o seu melhor conteúdo. Esse espaço é limitado. O slider oferece uma solução para você maximizar o uso desse espaço.

Veja a seguir várias soluções concretas de sliders, que usam quase sempre código HTML, CSS e jQuery. Talvez você encontre uma ideia para implementar no seu site ou blog e a respectiva ferramenta, dado que nos sites destes sliders você pode ler o tutorial, mas também efectuar o download do código.

E se não precisar dum slider hoje, pode precisar amanhã. Faça bookmark desta página ou faça download do código e guarde na sua pasta de recursos.

24 Sliders Em HTML, CSS e jQuery

Photo Slider

photoslider opiefoto

Um slider de fotos que usa Javascript, incluindo jQuery, PHP e CSS. Fácil de implementar. Código incluído no tutorial

jQuery: jqGalScroll v2.1 (Photo Gallery)

photo gallery benjaminsterling

Usa jQuery para criar um slider de fotos com paginação, como você pode ver na imagem supra.

Easy Slider 1.7 – Numeric Navigation jQuery Slider

easyslider cssglobe

easyslider paginacao cssglobe

Este slider permite 2 tipos de navegação, para visualizar as várias fotos ou imagens:

  • setas do lado direito e esquerdo do slider
  • paginação

Coda-Slider 2.0

auto slider ndoherty

Trata-se dum plugin jQuery, que produz o slide de imagens, texto ou até vídeos, conforme podemos antecipar na imagem publicada. Permite navegar clicando nas setas do lado direito e esquerdo, através de paginação e também faz o auto slide.

jQuery slideViewer 1.2

foto slide gcmingati

Trata-se dum slider em jQuery, baseado numa única unordered list, com paginação.

Image Rotator with Description (CSS/jQuery)

slide thumbs sohtanaka

Gosto muito deste slider. Tem imagens miniaturas, onde podemos clicar para rodar as imagens. Depois, cada imagem inclui um título, data e descrição. Usa HTML, CSS e jQuery e é muito fácil de implementar.

Galleria

galleria aino

É um slider de fotos muito popular e que funciona com uma navegação baseada em imagens miniatura, que fazem rodar as fotos maiores.

Slick and Accessible jQuery Slideshow

slideshow sixrevisions

Um slider onde cada slide inclui um título, uma descrição e uma imagem. A navegação é através de setas do lado direito e esquerdo do slider. Usa HTML, CSS e jQuery.

jFlow Plugin

slider nettuts

Um slider espectacular, com as setas de navegação no topo da própria imagem. Inclui título, que funciona como descritivo da imagem.

Featured Content jQuery Slider

slider miniaturas webdeveloperplus

Este slider usa como habitual jQuery. Tem imagens minuatura do lado direito com um título. Permite rodar as imagens maiores, clicando nas imagens miniatura. A imagem maior inclui título e descrição. As imagens rodam automaticamente.

Slick Auto-Playing Featured Content Slider

slider conteudo css-tricks

É um slider flexível, dado que é possível incluir com relativa facilidade formatos diferentes de conteúdo no próprio slider:

  • foto com título
  • foto com texto
  • título e texto

O interface tem uma imagem maior em cima e imagens miniatura em baixo. As imagens maiores rodam automaticamente. É possível navegar clicando nas imagens miniatura.

Nivo Slider

slider dev7studios

Slider espectacular, com 9 efeitos diferentes para a rodagem entre slides. As imagens rodam automaticamente. Ao passo com o rato por cima da image, aparece uma navegação com setas do lado direito e esquerdo. Permite ainda colocar um link em cada imagem

Automatic Image jQuery Slider

slider css jquery sohtanaka

Um slider em HTML, CSS e jQuery, para variar :), com rodagem automática das imagens. Inclui navegação com paginação. Gosto do design.

jQuery Blinds

slider blinds littlewebthings

Gosto da animação que faz a transição entre slides. Navegação com paginação. O autor garante compatibilidade com a maioria dos browsers, incluindo os mais usados.

jQuery Easy Slides v1.1

easy slides daledavies

Um slider simples, com rodagem automática das imagens. Cada imagem inclui um titulo e uma descrição.

jQuery Cycle Plugin

efeitos jquery slideshow malsup

Um slider com rodagem automática das imagens, mas com vários efeitos espectaculares de transição entre imagens.

PikaChoose jQuery Image Gallery

pikachoose image gallery

Este slider suporte a navegação através de setas e também através de imagens miniaturas. Tem também um botão de Play e Pause para a rodagem automática das imagens.

Simple jQuery Slideshow

slidershow simples jonraach

Um slider muito simples. As imagens rodam automáticamente. A mensagem é mesmo a simplicidade.

jCarousel – the jQuery carousel plugin

jcarousel quenuess

O slider tem uma imagem maior do lado esquerdo e 3 imagens miniatura do lado direito. A navegação é feita através das imagens miniatura, que rodam automaticamente, permitindo desse modo adicionar mais do que 3 imagens miniatura (e as correspondentes imagens maiores) ao slider. A image maior inclui um título e descrição. O slider usa HTML, CSS e jQuery.

Coin Slider

coin slider workshop

Trata-se dum slider estruturalmente semelhantes a alguns que já apresentamos. A navegação é feita através de setas do lado direito e esquerdo da imagem. Inclui ainda botões tipo paginação no fundo da imagem para navegação. Mas o destaque neste slider vai para os efeitos de transição que são fantásticos.

jQuery Scrollable

scrollable flowplayer

Este slider tem uma navegação do tipo TAB, no topo. Inclui também as botões de navegação ao fundo, com a opção de ver a imagem seguinte ou anterior. É possível ainda fazer a rodagem das imagens com a roda do rato. E tem muitas outras opções.

Moving Boxes

moving boxes css-tricks

O fato que distingue este slider dos anteriores é que exige a imagem central e, do lado esquerdo, parte da imagem anterior, do lado direito, parte da imagem seguinte. O visitante tem sempre a possibilidade de antecipar o que vai ver a seguir. A navegação é feita através das setas que vemos na imagem.

Supersized

supersized

Redimensiona as imagens de modo a preencherem o background. Inclui navegação para Play e Pause e do tipo setas para ver a imagem seguinte e a anterior. Com o enquadramento certo, é um slider espectacular.

Slider jQuery Webmaster.pt

slider webmaster.pt

Por fim, apresentamos um tutorial publicado aqui no Webmaster.pt. Tem 6 imagens miniatura do lado esquerdo, que funcionam como interface de navegação da galeria. Clicando na imagem miniatura, aparece a imagem maior do lado direito. Tem também efeitos fantásticos. A não perder.

1 Star2 Stars3 Stars4 Stars5 Stars (4 votes, average: 5.00 out of 5)

Deixe o seu comentário, participe!

43 Responses

  1. cara muito bom n sabia  mais como fazer slide, mas achei aqui eles pronto, cara vlw msmo n sei nem como fala:d

  2. Ótima lista, irei utilizar um desses sliders, estou querendo me livrar do flash 🙂 '

  3. Simplesmente atendeu de maneira espetacular uma demanda de um slider que eu precisava por num site de um cliente. Me livrei do flash e resolví o problema de forma leve e estética. Gostaria de aprender mais sobre jQuery. Poderia indicar um material para iniciantes. Tenho conhecimento em Javascript mas jQuery sempre me pareceu um pouco estranho, mas definitivamente tenho que aprender.
    Muito obrigado pelo post!

  4. O Slick and Accessible jQuery Slideshow é excelente!!!

    Era o que eu precisava! Muito obrigado por postar!

  5. excelente todos! porém eu precisava um com controle de play/pause e rolagem automática sem ser full screen.

    tem algum por aí?

    Valeu!
    Parabéns pelo espaço.

  6. Amigo achei muito legal, bacana mesmo. Eu estou aprendendo agora, e estou tentanto fazer com que meu site fique com este header rodando o tempo todo, teria como eu adaptar ele no meu site ja pronto.
    Estou fazendo em css. Na minha pagina ja tem um style.css. como eu faria para colocar seu jQuery no meu css?
    Me dá uma ajuda ai.
    wendersonav@hotmail.com

  7. Olá Rui so gostaria de saber uma coisa como eu adquiro estes slides? eu não achei onde eu os pego.

  8. eu gostei mt. a bronca é que jQuery pra entender no começo é %$@!18.
    Mas vale apena.

  9. poow nao sei como por no blogger ! se alguem souber como responde por favor,sou novo no ramo !

  10. muito bom mesmo, parabéns.

    os Sliders com JQuery Facilitam e Muito a nossa vida em Termo de Conteúdo para Destaque.

    Parabéns ao Criador do Post, que foi Disposto a Compartilhar o Conhecimento em Benefício dos Colegas Designers Gráficos e Web Designers.

  11. sou novo nessa area achei muito legal mas ainda nao sei em que partes eu insiro esses codigos no template do blogge,. se puder me esclarecer agradeço.

  12. Tem algum tutorial de como colocar esses slides no blogger ?
    só deixar o link
    Grato e Obrigado!

  13. melhor site dedicado a webmaster do mundoooooooooooooooooooooooooo!!!
    muito bom mesmo vlw a todo mundo do webmaster.pt ae
    fique com Deus e Jesus

  14. muito bom, parabéns.
    como faço para alinha o slide a esquerda ?
    muito obrigado.

  15. Que coisa mais lindaaaaaaa, cara você salvou minha vida, estava com outro slide simples só fazia uma paginação mais com esses novos slides o lyout ficou o bicho, parabens. Meus lyouts tão parecendo themas do wordpress, thank my friend,

  16. existe alguma forma dele ler todas as imagens de uma pasta sem a necessidade de listar uma a uma no código?

Leave a Reply

Your email address will not be published. Required fields are marked *


Versão Beta

Estamos a mudar

Olá, Somos criadores de conteúdo apaixonados por web design, programação, criação de websites e tecnologias digitais. Ajudamos os nossos clientes a levar o conteúdo certo às pessoas certas, criando artigos e recursos que facilitam a criação e otimização de websites.

Artigos Populares

Guia Prático Sobre Segurança Do Joomla

Dicas para diminuir substancialmente o número de vetores de ataque ao Joomla! Proteja o seu trabalho!

Os Segredos Do Sucesso Na Internet

A responsabilidade. O querer. O erro e a experimentação. O social. A memória da internet. Ser quem você é.

38 Ideias Espetaculares Para Sites De Empresas

Encontre inspiração nestes 45 exemplos de sites de empresas para criar o site da sua empresa.

24 Sliders Fantásticos Com jQuery

Lista de 24 sliders que você pode usar para destacar o seu melhor conteúdo. Maximize o espaço do seu site que é visível no monitor do visitante, sem fazer scroll.