SlideShow JavaScript – VanillaJS
Estou escrevendo alguns posts sobre Orientação a Objetos em JavaScript:
- Orientação a Objetos em JavaScript – Objeto Literal
- Orientação a Objetos em Javascript – Função Construtora
Exemplo JavaScript Orientado a Objetos
Para mostrar oo em js nada melhor do que codificarmos componentes do nosso dia-a-dia.
O projeto de hoje é um slideshow daqueles usados em adcasts de sites. Onde uma lista de imagens vai passando com efeito fade, e uma paginação controla o total de fotos, além de pausar a rotação automática, caso o usuário coloque o mouse sob um dos itens.
Já está no github: https://github.com/wbruno/slideshow, pode fazer um fork lá e sair usando.
Extensível
Como deixei toda transição de slides por conta do CSS, fazendo o fadeIn pela transição suave da propriedade opacity.
.adcast-item { transition: 2s; opacity: 0; } #adcast .is-active { opacity: 1; }
Este slideshow é completamente extensível. E para transformá-lo em um carousel passando os slides horizontalmente, apenas adiciono as seguintes linhas css:
#adcast { width: 3640px; position: absolute; top: 0; left: 0; transition: 2s; } .adcast-item { float: left; position: static; margin: 0; } #adcast.adcast-item-0 { left: 0; } #adcast.adcast-item-1 { left: -728px; } #adcast.adcast-item-2 { left: -1456px; } #adcast.adcast-item-3 { left: -2184px; } #adcast.adcast-item-4 { left: -2912px; }
Forma de uso
Basta chamar a função pública adcast.init(), passando como argumento a lista de elementos adcasts, e a lista de elementos pagers.
(function() { "use strict"; /*global document:false */ var $ = function(selector) { return document.querySelectorAll(selector); }, $adcasts = $('.adcast-item'), $pagers = $('.pager-item'); adcast.init({ adcasts: $adcasts, pagers: $pagers }); }());
Note que acima eu declaro a função $(), para evitar repetir o document.querySelectorAll. Porém, ainda assim é apenas javascript puro. VanillaJS.
Compatível com jQuery
Se você já estiver incorporando o jQuery no seu projeto, esse slideshow também é compatível.
var $adcasts = jQuery('.adcast-item'), $pagers = jQuery('.pager-item'); adcast.init({ adcasts: $adcasts, pagers: $pagers });
A forma de uso é a mesma, apenas invocando a função adcast.init(). Lá no github, tem um html de exemplo usando jQuery.
Demonstração
Live preview!! acessem:
http://wbruno.github.io/slideshow/
Já atualizei com todas as transições que fiz. Quer mais alguma ? faz um fork e me manda o pull, ou abre uma issue =)
Gostou ?