Biblioteca JQuery: sliders para o seu site
Com a passagem do tempo e o desenvolvimento da tecnologia noAs áreas de design web estão mudando e as necessidades / requisitos dos usuários para sites de conteúdo. Se anteriormente era principalmente conteúdo de texto com um pequeno número de imagens temáticas, hoje o componente gráfico é predominante. Ele permite que você obtenha um máximo de informações úteis e úteis em pouco tempo e não perca tempo lendo textos longos. A este respeito, cada vez mais popular e, além disso, um elemento essencial das páginas da web são os controles deslizantes. Eles são blocos com conteúdo variável neles - de imagens para links. Uma maneira moderna de adicionar este objeto web é usar a biblioteca JQuery. Os controles deslizantes criados com a ajuda desta ferramenta, são fáceis de usar, fáceis de usar e parecem muito impressionantes. Em seguida, veremos como fazer esses elementos de uma página da web você mesmo. Graças a um grande número de ferramentas padronizadas, torna-se possível implementar controles deslizantes jQuery de vários tipos e conteúdo diversificado.
Como adicionar um controle deslizante a uma página da web?
Formas de adicionar controles deslizantes para a páginasite alguns. Muitas vezes, você nem precisa escrever o código HTML e entrar no script. Há muitas bibliotecas gratuitas que oferecem aos usuários modelos já prontos, que permitem adicionar jQuery sliders ao seu site. Tudo o que é necessário de você é copiá-lo para o código-fonte da sua página da web e aproveitar o resultado. No entanto, neste caso, as possibilidades de realizar suas fantasias criativas são limitadas. Portanto, será supérfluo poder criar esse próprio elemento de design. Para fazer isso, você precisa saber como implementar um controle deslizante jQuery simples, e você sempre pode complicá-lo adicionando elementos adicionais ao código.
Crie um controle deslizante você mesmo: o código em HTML
A primeira coisa a começar é escrever o layout do futuro controle deslizante.
- Crie um bloco de slides no arquivo HTML, que conterá todos os nossos slides (fotos, etc.).
- Nela colocamos uma lista de ul, cada item do qual irá armazenar um slide separado.
Trabalhando em CSS
Em seguida, aplicamos as características necessárias a eleestilo, usando um documento CSS. É necessário que o controle deslizante de conteúdo JQuery que criamos funciona corretamente e tenha o formulário necessário. Nesta fase, temos as seguintes tarefas:
- Para se certificar de que apenas um slide é exibido no bloco de slides (a imagem ou o conteúdo necessário no momento), e o resto foi escondido;
- organizar slides um após o outro (da esquerda para a direita);
- faça o ul-container no qual os slides são armazenados, móveis (esquerda e direita).
Para fazer isso, definimos os seguintes parâmetros no arquivo CSS:
- para Slideshow: overflow-x - scroll, overflow-y - hidden:
- para ul: flutuador - esquerda.
Você também pode definir a largura, altura, fundo e assim por diante.
Nós escrevemos código em jQuery
Em HTML e CSS, todas as mudanças necessárias foram feitas. Resta trabalhar atrás do código JQuery, os controles deslizantes nos quais devem ter os seguintes parâmetros:
- os slides devem ser substituídos entre si com um certo intervalo de tempo;
- Quando você desliza o cursor do mouse, seu movimento deve parar.
Para isso, declaramos duas variáveis: slide-width (igual ao comprimento do slide) e slidertime (especifica o período da mudança de slide). O temporizador será iniciado quando a página do site estiver totalmente carregada. Para este parâmetro, nós amarramos a ação de passar o cursor do mouse no slide (o que interrompe a mudança de slide).
Certifique-se de especificar o comprimento do recipiente ul. Será igual ao número de slides multiplicado pelo comprimento de cada slide.
Nós inserimos a função responsável por mudar os slides. Isso é tudo, você pode verificar o trabalho do seu slider.
Conclusão
Neste artigo, nós olhamos comocrie de forma independente os controles deslizantes do jQuery para inserir na página do seu site. Usando um exemplo de implementação simples de um controle deslizante, você pode criar suas próprias variações de interpretação, fazendo alterações apropriadas no código-fonte. Isto irá melhorar o design e tornar o uso do seu site mais conveniente para os visitantes.
</ p>
