Glider.js, apesar de ser um slider JavaScript que já estar na praça há algum tempo, ainda não é tão usado quanto merece.
Ele é muito rápido, bem levinho, totalmente responsivo (mobile-friendly), não usa qualquer dependência (slider JavaScript puro; dependency free) e usa recursos nativos do navegador para fazer o scrolling e controle de paginação.
Tá bom para você? 😃 Então, continue lendo para saber mais sobre o Glider.js (incluindo exemplos de uso).
Conheça o Glider.js
Os conceitos de slider e carousel não são exatamente claros e unânimes dentro da comunidade de devs, mas o próprio Glider.js não se considera um carousel, principalmente por não oferecer (propositalmente) o recurso de loop infinito.
Mas, mesmo sem suporte para loop, o Glider mantém a capacidade de usar rolagem nativa dos browsers, criando uma sensação natural em qualquer dispositivo touch ao mesmo tempo em que fornece a estética e funcionalidade básicas de um carrossel — o que é ótimo também para uso em desktop, inclusive.
De qualquer maneira, ele é um slider responsivo que aproveita recursos nativos do navegador (um de seus pontos fortes), tornando a experiência de uso aprimorada, permitindo alcançar o desejado efeito de momentum scrolling.
Features do Glider
Mesmo sendo tão levinho (menos de 2,8KB gzippado), é possível fazer muita coisa com o Glider em função de suas features:
- Insanamente pequeno
- Ridiculamente rápido (até 25ms para a inicialização!)
- Vanilla JS – sem dependências (sem jQuery)
- Rolagem nativa do navegador (momentum scrolling)
- Totalmente responsivo (configurações por breakpoint)
- Navegação personalizável por setas e pontinhos
- Acessibilidade total ao teclado + ARIA Labeling
- Suporte para arrastar o mouse
- Suporte a Flexbox (ativado por padrão)
- Facilmente extensível
- Eventos Personalizados
- E muito mais!
Realmente, uma bela coleção de features. Quando dizemos que o Glider.js é um slider que poderia ser bem mais usado em projetos Web, não é à toa.
Exemplos de uso do Glider.js
Obviamente, não há porquê reproduzir todas as opções, métodos e eventos do Glider; no site oficial você encontra a documentação completa do não-carousel.
Vamos mostrar alguns exemplos de uso e, através deles, você verá algumas coisas possíveis de serem feitas — serão exemplos resumidos; para ver na totalidade, assista ao vídeo no início do artigo.
Usando o CSS e JS do Glider.js
É possível “instalar” o Glider em qualquer projeto Web através de npm, yarn ou a boa e velha CDN. Para fins didáticos, optemos pela última opção.
Então, em seu(s) documento(s) HTML, coloque a chama para a folha de estilos em sua tag <head> e a chamada ao script antes de fechar <body> — obviamente, ficando atento ao URL, que informa a versão dos assets do Glider que serão usados.
|
1 |
<link href="https://cdn.jsdelivr.net/npm/glider-js@1/glider.min.css" rel="stylesheet"> |
|
1 |
<script src="https://cdn.jsdelivr.net/npm/glider-js@1/glider.min.js"></script> |
Em relação à aparência do Glider, você tem a opção de sobrescrevê-la em seus próprios estilos — lembre-se de importá-los depois da chamada ao .css do Glider — ou sequer puxar o CSS dele e estilizar tudo do zero.
Recomendamos a primeira opção.
Exemplo 1: slider simples
Qualquer slider com JavaScript apresenta um conjunto de opções para controle básico de sua aparência e funcionalidades e, com o Glider, não seria diferente.
Então, o primeiro exemplo a ser mostrado é um slider simples, em que será possível mostrar algumas possibilidades de como criar um slider com JavaScript usando o Glider.js.
Glider permite fazer sliders com conteúdos diversos (não somente sliders de imagem), então, segundo a própria documentação, sua estrutura inicial demanda somente um container (slider) com seus conteúdos (slides).
Aproveitando que estamos explorando as possibilidades básicas, por que já não colocar elementos para as setinhas e a navegação de bolinhas?
O HTML fica assim:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<article class="c-carousel c-carousel--simple"> <div class="c-carousel__slides js-carousel--simple"> <article class="c-carousel__slide">1</article> <article class="c-carousel__slide">2</article> <article class="c-carousel__slide">3</article> <article class="c-carousel__slide">4</article> <article class="c-carousel__slide">5</article> <article class="c-carousel__slide">6</article> </div> <button class="js-carousel--simple-prev">«</button> <button class="js-carousel--simple-next">»</button> <div class="js-carousel--simple-dots"></div> </article> |
Além da omissão de atributos ARIA para fins de brevidade do exemplo, perceba que há, também, classes com o namespace CSS js-, ideais para serem usadas em hooks na camada de comportamento sem interferir nas demais.
Sem se preocupar com o visual do slider do exemplo (assista ao vídeo no início do artigo para ver também essa questão), o JavaScript necessário é:
|
1 2 3 4 5 6 7 8 9 10 11 12 |
var $simpleCarousel = document.querySelector(".js-carousel--simple"); new Glider($simpleCarousel, { slidesToShow: 2, slidesToScroll: 2, draggable: true, dots: ".js-carousel--simple-dots", arrows: { prev: ".js-carousel--simple-prev", next: ".js-carousel--simple-next", }, }); |
Na inicialização de um carousel com o Glider (new Glider()), é preciso passar 2 params:
- O elemento que será o carousel
- As opções usadas
Se você já usou algum slider JavaScript, provavelmente essas opções devem ser um tanto que familiares, mas, basicamente, o que se está fazendo é definir que 2 itens aparecerão por vez e 2 serão passados quando se clicar em algum dos botões de controle.
Botões de controle que, por sinal, estão sendo definidos (juntamente com as bolinhas de navegação) ao se informar quais elementos cumprirão esses papéis.
Exemplo 2: slider responsivo
Dentre as inúmeras possibilidades de sliders/carousels com Glider.js, obviamente não poderia faltar a de fazer um slider responsivo, obrigação de qualquer lib de slider que queira ser levada a sério.
Levando em consideração uma estrutura HTML bem similar à mostrada para o exemplo anterior (com nomes de classes alterados para evitar conflitos, claro), o JavaScript necessário para conseguir o carousel responsivo seria:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
const $responsiveCarousel = document.querySelector(".js-carousel--responsive"); new Glider($responsiveCarousel, { slidesToShow: 1, slidesToScroll: 1, draggable: true, dots: ".js-carousel--responsive-dots", arrows: { prev: ".js-carousel--responsive-prev", next: ".js-carousel--responsive-next", }, responsive: [ { breakpoint: 600, settings: { slidesToShow: 2, slidesToScroll: 2, }, }, { breakpoint: 900, settings: { slidesToShow: 3, slidesToScroll: 3, }, }, ], }); |
É bem facinho trabalhar com responsividade usando o Glider: uma das opções é um array de objetos que deve conter o breakpoint (em px) em que as settings entrarão em ação.
O responsivo é tratado considerando mobile first, então as definições fora de responsive entrarão em ação em tamanhos de viewport menores e, à medida em que os breakpoints forem entrando em ação (600, 900 etc.), as características do slider vão se alterando em tempo real.
Para mais um exemplo, como fazer um slider com miniaturas, assista ao vídeo no início do artigo.
Conclusão
Existem muitas soluções para slider com JavaScript, mas nem todos os sliders com JavaScript puro têm tantas boas características (e oferecem tantas possibilidades) quanto o Glider.js.
Apesar de não ser o slider/carousel mais popular, ele prova que pode ser usado em muitas situações e projetos Web, mostrando o que pode oferecer através de sua codificação simples, peso superotimizado, velocidade incrível e capacidades responsivas.
Certamente, Glider.js pode ser considerado com carinho na próxima vez em que precisar implementar um slider JavaScript.