SlideShow JavaScript – VanillaJS | Principal Engineer

Estou escrevendo alguns posts sobre Orientação a Objetos em JavaScript:

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 ?