---
title: 5 sliders de conteúdo para jQuery
authors: Davi Ferreira
type: post
date: 2011-05-25
excerpt: Sliders são ferramentas poderosas para destacar conteúdo em um site. Neste artigo você confere cinco opções de plugins jQuery para a implementação dessa funcionalidade.
url: /5-sliders-de-conteudo-para-jquery/
tweetbackscheck:
  - 1356467775
shorturls:
  - 'a:3:{s:9:"permalink";s:57:"https://tableless.com.br/5-sliders-de-conteudo-para-jquery";s:7:"tinyurl";s:26:"https://tinyurl.com/3hg5d4j";s:4:"isgd";s:19:"https://is.gd/A1JNJI";}'
twittercomments:
  - 'a:26:{i:104967191434240000;s:7:"retweet";i:127188360480563201;s:7:"retweet";i:126305832785805312;s:7:"retweet";i:126298110631743488;s:7:"retweet";i:126296419681304576;s:7:"retweet";i:126295748529762304;s:7:"retweet";i:126282972495233024;s:7:"retweet";i:126281640925339648;s:7:"retweet";i:126280933224611840;s:7:"retweet";i:126280718698557440;s:7:"retweet";i:126280593938989056;s:7:"retweet";i:126280240690495488;s:7:"retweet";i:149176535297957890;s:7:"retweet";i:149191682947162112;s:7:"retweet";i:149180851689766912;s:7:"retweet";i:149175257624883200;s:7:"retweet";i:149175133871931392;s:7:"retweet";i:153904890303877120;s:7:"retweet";i:152869024835960834;s:7:"retweet";i:152860162686844928;s:7:"retweet";i:152857963256741888;s:7:"retweet";i:169902553776132096;s:7:"retweet";i:169773014362230784;s:7:"retweet";i:169772041359212544;s:7:"retweet";i:169768362199613441;s:7:"retweet";i:169575504465248257;s:7:"retweet";}'
tweetcount:
  - 67
dsq_thread_id: 503011664
categories:
  - Javascript
  - Código
tags:
  - JQuery
  - Javascript

---
### Nivo Slider

<a href="https://nivo.dev7studios.com/" target="_blank">Site oficial</a> | <a href="https://nivo.dev7studios.com/demos/" target="_blank">Exemplos</a>

<img src="https://raw.githubusercontent.com/diegoeis/tableless-static-images/master/2011/04/Nivo-Slider-Demos.jpg" alt="" width="620" class="aligncenter size-full wp-image-3612" style="border:2px solid #ccc" srcset="uploads/2011/04/Nivo-Slider-Demos.jpg 633w, uploads/2011/04/Nivo-Slider-Demos-300x178.jpg 300w" sizes="(max-width: 633px) 100vw, 633px" />

O forte do Nivo Slider é um HTML limpo para a estrutura inicial do slider. Apenas um elemento div com imagens e links é necessário. O foco principal desse slider são imagens, mas o recurso de legenda em HTML acaba possibilitando a exibição de qualquer conteúdo.

Entre as opções oferecidas estão a velocidade e direção da transição e callbakcs para executar ações após o início e o carregamento dos slides. O plugin ainda possui nada mais, nada menos do que 16 opções de transição entre um slide e outro. Sua versão compactada possui 15kb.

### Coda Slider

<a href="https://www.ndoherty.biz/2009/10/coda-slider-2/" target="_blank">Site oficial</a> | <a href="https://www.ndoherty.biz/demos/coda-slider/2.0/" target="_blank">Demo</a>

<p style="text-align:center">
  <img src="https://raw.githubusercontent.com/diegoeis/tableless-static-images/master/2011/04/Coda-Slider-2.0-Niall-Doherty_s-dot-biz.jpg" alt="" width="477" height="503" class="aligncenter size-full wp-image-3624" style="border:2px solid #ccc" srcset="uploads/2011/04/Coda-Slider-2.0-Niall-Doherty_s-dot-biz.jpg 477w, uploads/2011/04/Coda-Slider-2.0-Niall-Doherty_s-dot-biz-284x300.jpg 284w" sizes="(max-width: 477px) 100vw, 477px" />
</p>

Este plugin surgiu baseado no slider do site do aplicativo <a href="https://www.panic.com/coda/" target="_blank">Coda</a>. Cada elemento do slide deve ser um elemento div com a classe &#8220;panel&#8221;.

O Coda Slider deixa um pouco a desejar na flexibilidade, oferecendo poucas opções, mas para exibir diferentes tipos de conteúdo é o plugin mais indicado.

### Orbit

<a href="https://www.zurb.com/playground/orbit-jquery-image-slider" target="_blank">Site oficial</a>

<img src="https://raw.githubusercontent.com/diegoeis/tableless-static-images/master/2011/04/Orbit_-jQuery-Image-Slider-Plugin-from-ZURB-ZURB-Playground-ZURB.com_.jpg" alt="" width="620" class="aligncenter size-full wp-image-3613" style="border:2px solid #ccc" srcset="uploads/2011/04/Orbit_-jQuery-Image-Slider-Plugin-from-ZURB-ZURB-Playground-ZURB.com_.jpg 969w, uploads/2011/04/Orbit_-jQuery-Image-Slider-Plugin-from-ZURB-ZURB-Playground-ZURB.com_-300x152.jpg 300w" sizes="(max-width: 969px) 100vw, 969px" />

Desenvolvido originalmente para ser um slider de imagens, o Orbit acabou incorporando também conteúdo HTML, desde que o elemento div do conteúdo contenha um background definido.

Sua versão compactada é bem leve, 3.2kb e um outro diferencial bacana do Orbit é a aplicação de um loader marcando o tempo de transição entre os slides.

### AnythingSlider

<a href="https://css-tricks.com/anythingslider-jquery-plugin/" target="_blank">Site oficial</a> | <a href="https://css-tricks.com/examples/AnythingSlider/" target="_blank">Exemplos</a>

<img src="https://raw.githubusercontent.com/diegoeis/tableless-static-images/master/2011/04/AnythingSlider-CSS-Tricks.jpg" alt="" width="620" class="aligncenter size-full wp-image-3610" style="border:2px solid #ccc" srcset="uploads/2011/04/AnythingSlider-CSS-Tricks.jpg 616w, uploads/2011/04/AnythingSlider-CSS-Tricks-300x194.jpg 300w" sizes="(max-width: 616px) 100vw, 616px" />

Como o próprio nome sugere, o AnythingSlider aceita tudo e qualquer tipo de conteúdo. Nas palavras do autor, &#8220;o plugin é uma tentativa de reunir todas as funcionalidades encontradas em outros plugins deste tipo&#8221;.

É o plugin mais adptável e que se integra melhor com o resto da sua aplicação oferencendo hashtags próprias para cada slide e possibilidade de criar um link direto para algum slide.

### Moodular

<a href="https://www.gougouzian.fr/projects/jquery/moodular/" target="_blank">Site oficial</a>

<img src="https://raw.githubusercontent.com/diegoeis/tableless-static-images/master/2011/04/moodular-not-another-jQuery-carousel_slider-plugin.jpg" alt="" width="620" class="aligncenter size-full wp-image-3647" style="border:2px solid #ccc" srcset="uploads/2011/04/moodular-not-another-jQuery-carousel_slider-plugin.jpg 914w, uploads/2011/04/moodular-not-another-jQuery-carousel_slider-plugin-300x169.jpg 300w" sizes="(max-width: 914px) 100vw, 914px" />

O legal do Moodular é, como também o nome sugere, ser modular: core, control e effects. Dessa forma se você precisa de um slider simples não é necessário carregar o módulo de controle, por exemplo.

O módulo de efeitos do Moodular inclui o popular &#8220;reflection&#8221; (aquele da Apple) e a parte de controle já vem com suporte para aplicativos touchscreen, além de navegação via teclado.