Tiny Slider 2 – Tutorial – Carrossel Javascript
Introdução Tiny Slider 2
Tiny Slider 2 é uma biblioteca utilizada para a criação de slideshow em páginas web. Algumas pessoas chamam de “Carousel” ou “Carrossel”. Mas tudo isso se trata daquele componente de banners giratórios muito visto em vários sites por aí.
Visite o site da biblioteca e confira a documentação oficial e todas as possibilidades de personalização: Site Oficial
Porque usar o Tiny Slider 2?
Uma coisa que considero sempre ao escolher as bibliotecas que vou utilizar em meus projetos é a compatibilidade com outras ferramentas e frameworks mais populares. No caso dessa biblioteca utilizada para criar sliders, ela é feita totalmente em javascript vanilla, ou seja, com javascript “puro”. O que isso significa? Significa que essa biblioteca não depende de nada além do javascript (e um pouquinho de css) para funcionar. Você consegue importar ela em qualquer projeto, utilizando qualquer framework, e ela irá funcionar normalmente. Então se você está usando React, Angular ou qualquer outro framework popular, essa biblioteca irá te atender perfeitamente.
Instalação
Então vamos colocar a mão na massa e fazer funcionar nosso carrossel javascript.
No primeiro passo iremos criar uma nova pasta onde terá nosso projeto e dentro dele vamos criar um arquivo index.html com a estrutura básica do html.
Após isso, vamos adicionar dentro da tag <head> o seguinte código responsável por importar o css utilizado pela biblioteca:
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tiny-slider/2.9.4/tiny-slider.css">
<!--[if (lt IE 9)]><script src="https://cdnjs.cloudflare.com/ajax/libs/tiny-slider/2.9.4/min/tiny-slider.helper.ie8.js"></script><![endif]-->
Após fazer isso, o próximo passo é importar para o nosso projeto o arquivo javascript da biblioteca. Copie o código a seguir e insira dentro da tag <body>:
<script src="https://cdnjs.cloudflare.com/ajax/libs/tiny-slider/2.9.2/min/tiny-slider.js"></script>
Feito isso, a biblioteca já está devidamente instalada e nosso projeto está pronto para criação de um slideshow javascript.
Criando slide javascript
A princípio iremos precisar inserir o seguinte código em nosso HTML:
<div class="my-slider">
<div><img src="./imagens/1.jpg"></div>
<div><img src="./imagens/2.jpg"></div>
<div><img src="./imagens/3.jpg"></div>
</div>
Insira essa código onde você deseja que apareça o carousel javascript. Por exemplo, eu inseri logo após a chamada da biblioteca Tiny Slider 2.
Repare que nesse trecho de código acima tem 3 tags <img>, cada uma delas contendo uma imagem diferente. Eu usei imagens que tenho aqui, mas você pode usar qualquer imagem que quiser. Todas irão funcionar normalmente, você precisa apenas se atentar a colocar o caminho correto da imagem.
Eu criei uma pastam “imagens” dentro do projeto e colei dentro dela minhas 3 imagens: 1.jpg, 2.jpg e 3.jpg.
Iniciando a biblioteca Tiny Slider 2
Finalmente esteramos inicializando a biblioteca Tiny Slider 2 para que nosso bloco de código HTML se torne um carrossel giratório javascript.
Para isso basta copiar o seguinte bloco de código logo abaixo de onde inseriu o código anterior:
<script type="module">
var slider = tns({
container: '.my-slider',
items: 1, // Quantidade de itens que são exibidos ao mesmo tempo
slideBy: 'page',
autoplay: true,
mouseDrag: true, // Seta se o carousel pode ser rotacionado com o movimento de clicar e arrastar do mouse
autoplayButtonOutput: false, // Seta visibilidade do botão de auto play
controls: false, // seta visibilidade das setas de controle
nav: false // Seta visibilidade da navegação (3 pontinhos)
});
</script>
Além disso, repare que deixei comentado em cada linha o significado de cada atributo utilizado na inicialização. Esses atributos irão te auxiliar na personalização do seu slideshow javascript.
Conclusão
Logo depois de tudo feito, salve o arquivo “index.html” e abra o projeto no seu navegador. Agora você consegue ver o carousel javascript funcionando perfeitamente.
Recomendo que a documentação oficial do Tiny Slider 2 seja explorada para que você consiga descobrir mais possibilidades de personalização dessa incrível biblioteca.
Se você prefere acompanhar tudo em vídeo, confira também nosso conteúdo no youtube:
Outras bibliotecas
Durante o desenvolvimento de um projeto web é normal utilizarmos ferramentas como essa para poder agilizar e baratear o desenvolvimento. Nem tudo precisa ser feito “na unha”. Confira essa outra biblioteca Typed.js que é utilizada para criar textos animados com efeito de máquina de escrever.