Uma biblioteca feita em React, com a ideia de facilitar a vida do programador, utilizando apenas um componente para possuir todas as funcionalidades de um slider.
A biblioteca funciona com apenas a importação de um componente chamado <Slider/>, com ele é possivel passar alguns parametros dentro do componente, a partir destes, é possivel manipular várias coisas do slider.
Dentro dele já existem diversas funcionalidades prontas como:
-
Movimento com mouse:
É possível utilizar o slider arrastando os itens com o mouse parecido com a funcionalidade nativa dos smartphones.
Essa funcionalidade também tem suporte para mobile, não há necessidade de preocupações.
-
Movimento com botões:
Ele possui, assim como os padrões, os botões laterias para navegar dentro do slider, isso inclui uma animação diferente da funcionalidade anterior.
-
Movimento com o tempo:
Também há a possibilidade de habilitar a transição de tempo em tempo do slider, além de inserir de quanto em quanto tempo deve ocorrer essa transição.
-
Quantidade de itens dentro do slider:
Possibilidade de mostrar quanto itens existem dentro do slider, como forma de ilustração apenas.
Além disso, possui a capacidade de aceitar várias classes para personalizar da maneira que você quiser o slider.
Além de remover algumas funcionalidades citadas acima de acordo com a necessidade.
-
NPM:
npm i @mauriciomds/react-slider
-
Download (Não recomendável):
Acessando esse o link:
https://maUs_OpenSource/pages/leftbar_menu.html
Você será redimensionado para a página de bibliotecas.
A partir disso, siga o passo a passo abaixo:
-
Selecione o link no menu lateral de acordo com o nome da biblioteca (nesse caso, sendo o
React Slider). Ou se preferir, faça uma pesquisa através do menu no canto inferior direito. -
Após isso, navegue até o final da página na aba Download.
-
Agora, basta clicar em baixar.
-
-
Copiando o Código (Não recomendável++):
Na página com o link acima, vá até a aba Código, nessa aba terá todas as técnologias para essa biblioteca, a partir disso, basta ir navegando de arquivo em arquivo e clicando no icone de copiar ao lado.
Para começar, precisaremos separar a utlização em em subtópicos para ficar mais organizado! 😜
- Pré-Requisitos
- Utilização do Slider
- ButtonsVisibility
- CircleVisibility
- TimelapseVisibility
- itemsGrabbingCursorVisibility
- ButtonsClasses
- SliderClasses
- ButtonsJSX
- ItemsJSX
- TimeLapseDuration
Primeiro, precisaremos adicionar as depêndencias:
import React from "react";
import { Slider } from "@mauriciomds/react-slider"Com isso, podemos partir para a utilização do componente.
Basicamente, funciona igual importar qualquer tipo de componente comum.
//App.jsx
import React from "react";
import { Slider } from "@mauriciomds/react-slider"
function App () {
return
<Slider />
}
export default App;Agora já temos o slider prontinho, fácil não? 😁
A diferença será relativo as propriedades que virão a seguir, ela servem para controlarmos esse slider de acordo com nossas preferencias.
A partir dessas propriedades podemos modificar o slider e todos os itens de dentro da maneira que quisermos, o template completo do slider com seus valores padrões ficaria assim:
//App.jsx
import React from "react";
import { Slider } from "@mauriciomds/react-slider"
function App () {
return
<Slider
buttonsVisibility={true}
circlesVisibility={true}
timelapseVisibility={false}
itemsGrabbingCursorVisibility={true}
buttonsClasses={[]}
sliderClasses={[]}
itemsClasses={[]}
circlesClasses={[]}
itemsJSX={[]}
buttonsJSX={{
left: undefined,
right: undefined
}}
timeLapseDuration={2} //Sempre em segundos
/>
}
export default App;Abaixo, teremos todas as definições de cada propriedade com sua descrição e funcionamento.
-
Ele habilita ou desabilita a visibilidade e utilização dos botões nas laterais.
Valores que podem ser passados:
- true: habilita;
- false: desabilita;
Valor padrão (quando não informado): true -
Ele habilita ou desabilita a visibilidade dos circulos abaixo do slider para mostrar a quantidade de itens.
Valores que podem ser passados:
- true: habilita;
- false: desabilita;
Valor padrão (quando não informado): true -
Ele habilita ou desabilita a funcionalidade de transição a cada periodo de tempo do slider.
Valores que podem ser passados:
- true: habilita;
- false: desabilita;
Valor padrão (quando não informado): false -
Ele habilita ou desabilita a utilização do cursor grab acima dos itens dentro do Slider.
Valores que podem ser passados:
- true: habilita;
- false: desabilita;
Valor padrão (quando não informado): true -
Insere todas as classes que os botões laterias vão ter a partir de um array. Sendo cada uma das classes passada separadamente dentro do array.
Valores que podem ser passados:
- [ ]: Vazio;
- [ "exemploCard", "exemploNavbar" ]: Com classes;
Valor padrão (quando não informado): [] -
Insere todas as classes que no slider para estilização. Sendo cada uma das classes passada separadamente dentro do array.
Valores que podem ser passados:
- [ ]: Vazio;
- [ "exemploCard", "exemploNavbar" ]: Com classes;
Valor padrão (quando não informado): []Observação: por padrão, o slider vem com uma classe relacionada a largura, a classe
.slider, nela existe a propriedadewidth: 100%.Caso deseje trocar a largura do slider, é necessário adicionar a palavra chave
!importantdepois do width, para assim, sobrescrever a largura padrão. -
Insere todas as classes nos itens dos Slider. Sendo cada uma das classes passada separadamente dentro do array.
Valores que podem ser passados:
- [ ]: Vazio;
- [ "exemploItens", "exemploItens" ]: Com classes;
Valor padrão (quando não informado): [] -
Insere todas as classes nos circulos. Sendo cada uma das classes passada separadamente dentro do array.
Valores que podem ser passados:
- [ ]: Vazio;
- [ "exemploCircles", "exemploCircles" ]: Com classes;
Valor padrão (quando não informado): [] -
A funcionalidade insere dentro dos botões o JSX passado no
lefteright(respectivamente na direção dos botões) para que seja possível utilizar diferentes imagens ou icones.Valores que podem ser passados:
- { left: undefined, right: undefined }: Sem nenhum JSX;
- { left: < ArrowLeft/>, right: < ArrowLeft /> }: Com JSX;
Valor padrão (quando não informado): { left: undefined, right: undefined } -
Essa funcionalidade é responsável por colocar funções JSX dentro do slider, independente da quantidade, estilos ou nós Filhos.
Valores que podem ser passados:
- [ ]: Sem nenhum JSX;
- [ < Teste1/>, < Teste2/>, < Teste3/> ]: Com JSX;
Valor padrão (quando não informado): [] -
Essa funcionalidade determina quantos segundos deve demorar para executar a transição dos itens dentro do slider, determinando assim um tempo para essa transição.
Valores que podem ser passados:
- undefined: nenhum valor;
- (1,2,3,4...): números;
Valor padrão (quando não informado): 2
A padronização padrão é algo que já vem incluso nesse componente, ainda mais para saber como ficaria "as coisas" caso não houvesse nenhum item dentro do slider.
Por conta disso, quando algum valor é inserido (ou não inserido) incorretamente nas propriedades com o final "JSX", o próprio Slider fará o trabalho de gerar componentes de exemplo para ilustrar como deveria ficar.
Todas propriedades possuem algum valor padrão, porém porém as únicas que geram valores em JSX são: itemsJSX e buttonsJSX.
Toda vez que algum valor inserido (ou não inserido) nas propriedades não for esperado pelo componente, ocorre algo chamado "Funcionamento Continuo", ou seja, o funcionamento do sistema ao todo continua normalmente, porém, outros valores são automaticamente inseridos no lugar do inválido.
Esses valores inseridos são os Valores Padrões das propriedades citados na sessão de Utilização do Slider, com excessão aos terminados em JSX, ou seja, o itemsJSX e buttonsJSX.
Esses dois em específico recebem componentes no lugar de seus valores padrões, esses componentes podem ser vistos na sessão de Ilustrações.
Além disso, é importante sempre ficar de olho no console, qualquer valor que não for inserido corretamente será apontado com uma mensagem de erro, informando a key e o valor incorreto.
Aqui você pode ver de forma prática como que o slider vem para você e um caminho de como é possível personalizar praticamente tudo e adequar o mesmo de acordo com o site.
- Sem nenhuma estilização e valores padrões:
- Com JSX de imagens e estilos:
Mauricio Muller dos Santos 🎈
Entre em contato através das rede abaixo! 👋🏽
