Como criar um controle deslizante de imagem usando JavaScript

Um Slide de imagemR que compreende várias imagens exibidas em um aplicativo da web é chamado de “Apresentação de slides" e "Carrosséis”. Ele permite que você mostre várias imagens, vídeos ou gráficos em um aplicativo da web. Além disso, adicionar um controle deslizante de imagem a um site pode fascinar os usuários e capturar sua atenção.

Sendo um desenvolvedor de JavaScript, se você for solicitado a criar um controle deslizante de imagem para um aplicativo da web, você rapidamente pensará em empregar "plugins jQuery". Esses plugins são úteis; No entanto, eles podem encontrar conflitos de código com bibliotecas existentes e bibliotecas jQuery. Então, o que fazer neste cenário? Em vez de usar jQuery, utilize JavaScript e crie um controle deslizante de imagem sem aborrecimento.

Este artigo ensinará o procedimento de criando um Slider de imagem em javascript. Então vamos começar!

Como criar um controle deslizante de imagem usando JavaScript

Para criar um controle deslizante de imagem usando o JavaScript, você deve seguir as instruções abaixo dadas:

Passo 1: Upload desejado imagens para a pasta do projeto.
Passo 2: Adicione necessário Elementos html para o "índice.html" arquivo.
Etapa 3: Definir lógica No arquivo JavaScript.
Passo 4: Colocou o estilo do elemento html adicionado no “estilo.CSS" arquivo.

De acordo com as etapas mencionadas, passaremos agora pelo procedimento de criação de um controle deslizante de imagem usando JavaScript.

Observação: Para fins de demonstração, estamos usando o código do Visual Studio. No entanto, você pode utilizar qualquer editor de código de sua escolha.

Etapa 1: Faça o upload de imagens desejadas para o projeto

No seu projeto, crie uma nova pasta chamada “imagens”E adicione as imagens desejadas para as quais você deseja criar um controle deslizante de imagem.

Por exemplo, em nosso “Slider de imagem”Pasta do projeto, criamos um“imagensPasta e depois adicionou três imagens: “IMG1.jpg","IMG2.jpg", e "IMG3.jpg”:

Etapa 2: Adicione os elementos HTML necessários ao “Índice.arquivo html ”

No "índice.html"Arquivo, adicionaremos um contêiner"Imagens-Slideshow”Usando o“" marcação. Este contêiner é dividido ainda mais nas seções de três lâminas de imagem.

Juntamente com os slides de imagens especificados, também adicionaremos dois símbolos HTML com a ajuda do “”Tag Anchor. O "<”O símbolo nos levará ao“anterior”Slide, enquanto o segundo símbolo“>”Desliza para o“próximo”Imagem:

❮
❯

Aqui está como nosso “índice.html”O arquivo parece:

Etapa 3: Defina a lógica no arquivo JavaScript

Temos que definir lógica no “projeto.JS”Arquivo de tal maneira que, quando o slider da imagem é carregado pela primeira vez, mostra a primeira imagem no controle deslizante. Depois disso, nos permite mover -nos entre os slides, utilizando os símbolos HTML seguinte e anterior.

Para fazer isso, em primeiro lugar, vamos definir “1" Enquanto o "currentIndex”De slides e passá -lo para o“displayslides ()”Função:

var currentIndex = 1;
displayslides (currentIndex);

O "displayslides ()”Função aceita a“currentIndex”Valor como um argumento“num”. Na primeira etapa, essa função busca todos os elementos com o nome da classe “Imageslides”.

Então, vamos adicionar um “se" doença "num> slides.comprimento”Isso verifica se o valor do“num”O argumento é maior que o comprimento dos slides“3”. Observe que o “num”Valor refere -se ao“currentIndex”Dos slides. No caso, se a condição especificada avaliar como “verdade", o "currentIndex"Do slider será definido como"1”. Esta condição será aplicada na situação em que a última imagem (slide 3) é exibida e o usuário clica no “próximo" botão. Ao fazer isso, o controle deslizante definirá o “primeiro”Imagem (slide 1) na apresentação de slides.

Da mesma forma, o segundo “se" doença "num < 1 “Será avaliado como verdadeiro, quando a primeira imagem (slide 1) for exibida na apresentação de slides e o usuário clicar no“anterior" botão. Nesse caso, o valor do “currentIndex"É definido como"3"Que é igual ao controle deslizante"comprimento”E a última imagem (slide 3) será mostrada na apresentação de slides.

Além disso, quando um slide é selecionado para exibir usando seu “currentIndex”, A exibição dos outros dois slides do estilo será definida como“nenhum”:

função exibeLides (num)
var x;
var slides = documento.getElementsByClassName ("Imageslides");
se (num> slides.comprimento) currentIndex = 1
if (num < 1) currentIndex = slides.length
para (x = 0; x < slides.length; x++)
Slides [x].estilo.display = "nenhum";

Slides [currentIndex - 1].estilo.display = "bloco";

No slider da imagem, quando clicamos no (próximo) “>”Símbolo HTML,“1”É passado como um argumento para o“Setslides ()”Função que significa que o controle deslizante precisa se mover para o próximo slide. Para esse fim, o “Setslides ()”Invoca“displayslides ()”Função ao passar“currentIndex += num”Como argumento. Esta operação vai incrementar “1" no "currentIndex”Valor e depois mostre essa imagem específica na apresentação de slides.

No outro caso, quando (anterior) ““<”Símbolo é clicado, um“-1”O valor é passado para o“displayslides ()”Método para exibir a imagem anterior no controle deslizante:

Função Setslides (num)
DisplaysLides (currentIndex += num);

Etapa 4: defina o estilo do elemento html adicionado no “estilo.Arquivo CSS ”

Em seguida, adicione o código abaixo do "estilo.CSS”Arquivo para especificar o estilo dos elementos HTML adicionados:

.Imageslides
Mostrar nenhum

img
margem: automático;
exibição: bloco;
largura: 100%;

/ * Nosso contêiner de apresentação de imagens principais */
.Imagens-Slideshow
Max-lar: 612px;
Posição: relativa;
margem: automático;

/*Estilo para ">" a seguir e "<" previous buttons */
.slider-btn
Cursor: Ponteiro;
Posição: Absoluto;
TOP: 50%;
Largura: Auto;
preenchimento: 8px 16px;
Margin -top: -22px;
cor: rgb (0, 0, 0);
intensidade da fonte: Negrito;
Size da fonte: 18px;
Transição: 0.6s facilitar;
Radio de fronteira: 0 3px 3px 0;
Seleção de usuário: Nenhum;
Background-Color: RGBA (255, 255, 255, 0.5);
Radio de fronteira: 50%;

/ * Definindo a posição do botão anterior em direção à esquerda */
.anterior
Esquerda: 2%;

/ * Definindo a posição do próximo botão para a direita */
.próximo
Direita: 2%;

/ * Over Purning, adicionando uma cor de fundo */
.Anterior: Passe o mouse,
.Próximo: Hover
Cor: RGB (255, 253, 253);
Background-Color: RGBA (0, 0, 0, 0.8);

Depois de salvar o código adicionado, abra o “índice.html”Arquivo no navegador e confira o funcionamento do slider de imagem criada:

Isso se tratava de criar um controle deslizante de imagem básico usando JavaScript. Você pode pesquisar ainda mais para adicionar alguma variação no controle deslizante da imagem.

Conclusão

Em vez de utilizar plugins jQuery, criando um Slider de imagem usando JavaScript é considerado uma das melhores opções. Leva menos tempo para implementação e garante erros ou conflitos. Um slider de imagem também torna uma página da web mais inovadora e captura a atenção dos usuários. Este artigo discutiu o procedimento para criar um controle deslizante de imagem em JavaScript.