Crie um controle deslizante de imagem com Jquery para uma web

Vamos criar um controle deslizante desenvolvido com Jquery Y Nivo Slider, sem a necessidade de plugin e que possamos adaptar ao nosso site.

Para fazer isso, vamos usar o Framework Jquery, que é uma biblioteca para facilitar o trabalho com a linguagem Javascript. Baixamos a biblioteca de Jquery.com, também é possível que você possa usá-lo puxando googleapis.com usando este código em sua página html para adicionar este script.

Se você baixou da página Jquery e carregou para um diretório em seu site, você deve colocá-lo para apontar para seu domínio como o seguinte exemplo:

Agora vamos baixar Controle deslizante Nivo que é a Biblioteca Jquery que nos permitirá criar o controle deslizante. A partir daqui, você pode baixar o controle deslizante do Nivo gratuitamente. Descompacte o arquivo em nosso diretório, aqui podemos ver a estrutura da web.

Agora vamos criar um arquivo index.html para nosso site, no cabeçalho colocaremos as bibliotecas e folhas de estilo. Podemos ver a biblioteca Jquery, a biblioteca nivo slider e as próprias folhas de estilo do Nivo slider, então podemos personalizá-las.

Agora vamos criar um contêiner para nossas imagens e para o controle deslizante, para isso e para podermos mostrá-lo, ele foi criado dentro do mesmo index.html (Também pode ser criado em um arquivo de folha de estilo CSS, para se adequar cada um).
Começamos com a estrutura da web e o próprio controle deslizante, inserindo as imagens a serem exibidas e uma mensagem.

Em seguida, ativamos o plugin nivo Silder e enviamos parâmetros sobre o tipo de efeito, tempo entre a animação, pausa entre a imagem e muitos mais que podem ser vistos na documentação do Nivo Slider.

Vamos observar que o id está ativado #silder o mesmo onde defino as imagens, então se eu quiser ter mais de um controle deslizante terei que replicar a mesma estrutura e ativá-la para o id correspondente.
O resultado do teste de index.html em um navegador é:

Aqui vemos o segundo slide, abaixo vemos o número de slides 1 e 2, e os links padrão Anterior (anterior) Próximo (próximo) vamos melhorar a visualização disso usando css.
Podemos mudar os números para marcadores simplesmente olhando para nivo-silder.css

 .nivo-controlNav {texto-alinhar: esquerda; preenchimento: 0; posição: relativa; índice z: 10; } .nivo-controlNav para {display: inline-block; largura: 10px; altura: 10px; plano de fundo: url (bullets.png.webp) sem repetição; texto-indent: -9999px; fronteira: 0; margem: 0 2px; } .nivo-controlNav a.active {posição de fundo: 0 100%; } .nivo-directionNav para {display: block; largura: 30px; altura: 30px; fundo: url (flechas.png.webp) sem repetição; texto-indent: -9999px; fronteira: 0; topo: automático; inferior: -36px; índice z: 11; } .nivo-directionNav a: hover {background-color: #eee; -webkit-border-radius: 2px; -moz-border-radius: 2px; raio da borda: 2px; } a.nivo-nextNav {posição de fundo: 160% 50%; direita: 0px; } a.nivo-prevNav {posição de fundo: -60% 50%; esquerda: automático; direita: 35px; } 

O resultado dessa mudança serão os números como marcadores à esquerda e os links como setas à direita.

Vamos estender a funcionalidade mostrando um bloco de dados em um dos slides

Modificando o código que já temos, mudamos o parágrafo no slide 2 para um bloco que chamarei com um id # block2, então crio o bloco e aplico um estilo oculto para que ele só seja visível quando o slide 2 for ativado.
O resultado é o seguinte:

Você também pode colocar imagens em miniatura. Outra opção é gerar o conteúdo dinamicamente a partir de um mysql e php ou usá-lo em um modelo CMS como joomla ou wordpress. Ele vem com muitos plugins já programados, mas com algumas linhas de código podemos criar nosso próprio componente. Espero que tenha servido a você.Gostou e ajudou este tutorial?Você pode recompensar o autor pressionando este botão para dar a ele um ponto positivo