O repositório em que você se encontra tem como o objetivo fornecer um código pronto e elaborado pelo autor, bem como ensinar a utilização do mesmo, o código pode ser alterado posteriormente para deixar o funcionamento ao gosto do usuário.
Para o uso do código de maneira livre é necessário o utilizador informar os créditos do autor (Leonardo Delgado), caso tenha sido feita qualquer modificação no código informar junto aos créditos (ex.: Slider.js by: Leonardo Delgado. The original code has modifications.)
Previsualização:
﹏﹏﹏﹏﹏﹏﹏﹏﹏﹏﹏﹏﹏﹏﹏﹏﹏﹏﹏﹏﹏﹏﹏﹏﹏﹏﹏﹏﹏﹏﹏﹏﹏﹏﹏﹏﹏﹏﹏﹏﹏﹏﹏﹏﹏﹏﹏﹏﹏﹏﹏﹏﹏﹏﹏﹏﹏﹏﹏﹏﹏﹏
1. Funcionamento
2. Configuração do slider
2.1 Data-tags do slider
3. Configuração dos slider refs (Opcional)
4. Configuração do indicator ref (Opcional)
Rodapé
﹏﹏﹏﹏﹏﹏﹏﹏﹏﹏﹏﹏﹏﹏﹏﹏﹏﹏﹏﹏﹏﹏﹏﹏﹏﹏﹏﹏﹏﹏﹏﹏﹏﹏﹏﹏﹏﹏﹏﹏﹏﹏﹏﹏﹏﹏﹏﹏﹏﹏﹏﹏﹏﹏﹏﹏﹏﹏﹏﹏﹏﹏
Um slider é um elemento de interface com o usuário comumente usado em aplicativos e sites para permitir que os usuários selecionem um valor em um intervalo específico. Ele normalmente consiste em uma barra horizontal com um indicador que pode ser arrastado para a esquerda ou direita.
O funcionamento é simples, basta copiar a estrutura html informada nesse artigo, e utilizar data-tags para customizar seu slider e alterar classes especificas do css para uma edição visual.
Faça o download da pasta 0-slider-template presente nesse repositório, dentro dessa pasta já terá os arquivo pre-moldados com algumas informações, se deseja realizar a inserção do zero, siga os passos a seguir:
Primeiro passo, dentro da pasta informada acima, copie os arquivos slider.js e slider.css e cole em seu projeto.
Segundo passo, referencie esses arquivos em seu arquivo html que irá utiliza-los.
<html>
<head>
<!-- Imports -->
<link rel="stylesheet" href="./slider.css">
<script src="./slider.js"></script>
<!------------->
</head>
<body>
</body>
</html>Terceiro passo, crie uma seção com a classe slider-container (caso a sua página venha a possuir mais de um slider crie um id para identifica-lo), nessa seção será configurado a maior parte do funcionamento do slider (para configurar o slider clique aqui para ver as data-tags), dentro dela crie uma div com a classe slider e outras duas divs com a classe slider-btn (essas duas divs servirão como botões para navegar dentro no slider) e coloque em uma a classe slider-btn-left e em outra a classe slider-btn-right para posicionar os botões na esquerda e direira respectivamente.
<section id="slider-exemplo" class="slider-container">
<div class="slider">
</div>
<!-- Buttons -->
<div class="slider-btn slider-btn-left"><button><</button></div> <!-- < é o código do simbolo menor que ("<") -->
<div class="slider-btn slider-btn-right"><button>></button></div> <!-- < é o código do simbolo maior que (">") -->
</section>Quarto passo, crie os cards que irão passar em seu slider (não há limites no número de cards), para isso, dentro da div slider, crie uma div com a classe card-wrapper e dentro dessa div crie uma div com a classe card-image e outra div com a classe card-content, dentro de card-content crie dois elementos, um com a classe card-title e outro com a classe card-description. Agora para adicionar mais cards basta copiar e colar a div card-wrappers quantas vezes desejar.
<!--<div class="slider">-->
<div class="card-wrapper">
<div class="card-image"></div>
<div class="card-content">
<h3 class="card-title">titulo</h3>
<p class="card-description">Descrição</p>
</div>
</div>
<!-- [...] -->Você pode esconder informações do cartão colocando ao lado da classe card-wrapper as classeshidden-image"para imagens ouhidden-contentpara o conteúdo.
<div class="card-wrapper hidden-image">
<!-- [...] -->
</div>
<div class="card-wrapper hidden-content">
<!-- [...] -->
</div>
Você pode também mudar a orientação do itens, ao invés de ficar a imagem acima ou abaixo do texto, ela pode ficar ao lado do texto, para isso basta colocar ao lado da classe card-wrapper a classe card-wrapper-grid-column.
<div class="card-wrapper card-wrapper-grid-column">
<!-- [...] -->
</div>Quinto passo, depois de concluirmos a nossa estrutura HTML, precisamos referencia-la em um arquivo JS que conectará o seu arquivo HTML com o arquivo slider.js, para isso vamos criar um outro arquivo chamado index.js e nele colocar o código a seguir.
// cria uma constante que receberá todos os sliders dentro do documento
const sliderContainers = document.querySelectorAll(".slider-container");
//para cada elemento HTML com a classe "slider-container" instancia a classe slider que usa como parâmetro esse elemento.
sliderContainers.forEach(sliderContainer => {
new slider(sliderContainer);
});Por fim, no final do documento HTML chame esse arquivo.
<!-- [...] -->
<script src="./scripts/main.js"></script>
</body>
</html>As data-tags permitem configurar o funcionamento do slider em questão, veja abaixo cada uma delas e o que fazem:
| Data-tag | Exemplo | Descrição |
|---|---|---|
data-slider-image-src |
data-slider-image-src="./assets/slider-images/photo-{id}.svg" |
Define o caminho onde serão encontradas as imagens de cada card (obs: as imagens devem estar no mesmo diretório, possuindo o mesmo nome seguido do número do card (onde conterá esse número escreva "{id}" na data-tag como no exemplo ao lado)) |
data-slider-width |
data-slider-width="80%" |
Define a largura do container do slider |
data-slider-height |
data-slider-height="auto" |
Define a altura do container do slider |
data-slider-size |
data-slider-size="80% auto" |
Define a largura e a altura do container do slider simultaneamente |
data-slider-card-width |
data-slider-card-width="400px" |
Define a largura dos cards (obs: a altura é com base na altura do container do slider) |
data-slider-scroll-start |
data-slider-scroll-start="10 10" |
Define um scroll inicial para o slider, o primeiro valor irá afetar todo o scroll, já o segundo só irá afetar o scroll ao a página ser carregada |
data-slider-endless |
data-slider-endless="true" |
Ativa ou desativa o modo carrossel (obs: algumas funcionalidades não funcionam sem esse modo ativo) |
data-auto-card-disposition |
data-auto-card-disposition="true" |
Ativa ou desativa o ajuste automático do tamanho dos cards para não sobrarem na tela |
data-slider-auto-flow |
data-slider-auto-flow="true 2000 10000" |
Ativa ou desativa o scroll automático dos cards, onde o segundo valor representa o intervalo entre um scroll e outro, e o terceiro valor representa um intervalo de repouso ao detectar qualquer interatividade do usuário com o slider (ambos valores são em milissegundos) |
data-refs-indicator |
data-refs-indicator="true" |
Ativa ou desativa o indicator ref (veja a imagem de referência) |
data-refs-slider |
data-refs-slider="true" |
Ativa ou desativa os slider refs (veja a imagem de referência) |
<section id="slider-exemplo" class="slider-container" data-slider-scroll-start="10" data-slider-image-src="./assets/slider-images/photo-{id}.svg" data-slider-endless="true" data-slider-size="90% auto" data-slider-card-width="400px" data-auto-card-disposition="true" data-slider-auto-flow="false 2000 10000" data-refs-indicator="true" data-refs-slider="true">
<!-- [...] -->
O slider ref (veja a imagem de referência) é uma div a parte onde pode mostrar os valores do cartão que está em destaque do slider (obs: não há limite nos sliders refs que você pode criar, mas recomenda-se criar apenas um por slider; obs2: os slider refs funcionam apenas com o modo carrossel ativo), para a criação de um slider ref, siga os passos a seguir:
Primeiro passo, caso não haja, defina um id para o container do seu slider.
<section id="slider-exemplo" class="slider-container">
<!-- [...] -->Segundo passo, crie uma seção no lugar que desejar do seu documento com a classe slider-ref e nela coloque a data-tag data-slider-ref e nela coloque o id definido antes (não é necessário chamar com # o id).
<section class="slider-ref" data-slider-ref="slider-exemplo">
</section>Por fim, referêncie os elementos dentro do cartão em destaque criando uma div com a classe slider-image-ref para a imagem e a classe slider-content-ref para os demais itens textuais, para definir a referência coloque em ambos itens a data-tag data-slider-item-ref e dentro dela a classe ou a div referenciada (utilizar "#" para id e "." para classe).
<section class="slider-ref" data-slider-ref="slider-exemplo">
<div style="width: 100px; height: 100px" class="slider-image-ref" data-slider-item-ref=".card-image"></div>
<div>
<h2><span class="slider-content-ref" data-slider-item-ref=".card-title"></span></h2>
<p><span class="slider-content-ref" data-slider-item-ref=".card-description"></span></p>
</div>
</section>O indicator ref (veja a imagem de referência) é uma div a parte onde será mostrado a posição do cartão atual em relação ao primeiro cartão (obs: só é possível criar um indicator ref por slider; obs2: o indicator ref funciona apenas com o modo carrossel ativo), para a criação de um indicator ref, siga os passos a seguir:
Primeiro passo, caso não haja, defina um id para o container do seu slider.
<section id="slider-exemplo" class="slider-container">
<!-- [...] -->Segundo passo, crie uma seção no lugar que desejar do seu documento com a classe slider-indicator e nela coloque a data-tag data-slider-ref e nela coloque o id definido antes (não é necessário chamar com # o id).
<section class="slider-indicator" data-slider-ref="slider-exemplo">
</section>Terceiro passo, crie dentro dessa seção duas divs, uma com a classe indicator-wrapper e a outra com indicator-preset.
<div class="indicator-wrapper">
</div>
<div class="indicator-preset">
</div>Por fim, dentro da classe indicator-preset crie quatro elementos do tipo button e atribua as classes indicator-previous, indicator-around-selected, indicator-selected e indicator-next uma para cada button. Caso queira definir uma estilização para seu indicator ref, você pode criar uma classe a parte e estiliza-la ao seu gosto ou utilizar uma já pronta no arquivo slider.css como indicator-round, indicator-box ou indicator-rect.
<section class="slider-indicator" data-slider-ref="slider-exemplo">
<div class="indicator-wrapper">
</div>
<div class="indicator-preset">
<button class="indicator-round indicator-previous"></button> <!-- previous (opcional) -->
<button class="indicator-round indicator-around-selected indicator-around-merge"></button> <!-- around (opcional) -->
<button class="indicator-round indicator-selected"></button> <!-- selected -->
<button class="indicator-round indicator-next"></button> <!-- next -->
</div>
</section>