Slider html css
Os controles deslizantes são um tipo de apresentação de slides de dados que pode incluir fotos, texto, símbolos e hiperlinks, entre outras coisas. É um componente da página da web que desliza para a frente ou talvez em qualquer direção. É um método de apresentar material em um site em uma única região onde o material pode deslizar para a posição, permitindo a apresentação de grandes volumes de material em um único local.
Para aumentar a funcionalidade de JavaScript, vários controles deslizantes de CSS são implementados ao lado dela. No entanto, você pode ocasionalmente querer um controle deslizante básico e compacto criado apenas utilizando HTML e CSS. É incrivelmente leve sem JavaScript e funciona significativamente mais rápido enquanto navega.
Criando um slider com CSS
Para criar um controle deslizante de texto responsivo simples usando HTML e CSS, o primeiro passo que daremos é estruturar o layout do controle deslizante. Ele criará espaço para o controle deslizante onde se encaixará.
No código anterior, exercemos o elemento. Esta tag refere -se à tag de divisão. Dentro de um arquivo HTML, ele especifica uma divisão ou segmento. Funciona como um contêiner utilizado para agrupar componentes HTML. Depois disso, o CSS é usado para projetar coisas. O "Slider-container" é o componente no site onde o controle deslizante será mostrado. O "deslizante" serve como exibição ou janela para apresentar todos os slides que criaremos. Os slides serão mantidos em "slides". Este "controle deslizante" é o componente que rola e gera a aparência deslizante no "Slider-container". Enquanto "slide" refere -se a cada slide usado no controle deslizante.
Lembre -se de que você precisará ter a classe "slide" e um "id" distinto para cada slide que você cria. Neste script, criamos quatro classes "slide", cada uma com um "id" exclusivo como: "slides_1" para o 1º slide, "slides_2" para o 2º slide, "slides_3" para o terceiro slide e "slides_4" para o 4º slide. Também definimos o "slide_text" exibido em cada slide, respectivamente, dentro da tag "span".
Agora, vamos gerar o script CSS.
Você pode usar o que quiser para um "contador de controle deslizante". Aqui, utilizamos o Flexbox. Você pode estilizar rapidamente HTML com um layout CSS Flexbox. Utilizando colunas e linhas, o Flexbox torna o posicionamento vertical e horizontal dos objetos diretos. Para preencher a área, os objetos “flexionariam para vários tamanhos. Você pode, no entanto, utilizar a grade CSS se escolher.
O "deslizante" simplesmente ajustará o tamanho do controle deslizante. Esta propriedade de "largura" ajustará a largura do controle deslizante. A "largura máxima" de um objeto é especificada pelo atributo "max largura". A altura do objeto é ajustada automaticamente quando o conteúdo excede a largura do limite. O atributo de largura máxima é ineficaz quando o conteúdo fornecido é menor que a largura máxima. A colocação de um objeto com "posição: parente". é relativo a essa posição usual.
O elemento slides a seguir agora será estilizado no CSS:
O atributo Overflow-X determina se o conteúdo de um elemento em nível de bloco deve ser cortada, rolada ou mostrada dados de estouro. Qualquer coisa que não se encaixe facilmente na visualização "deslizante" só se tornará visualizável por rolagem quando você ativar o "Overflow-x" a rolar. A próxima coisa que fizemos foi colocar o "scroll_behavior" para "suavizar". O atributo Scroll-Behavior determina se o movimento de rolagem é animado sem problemas sempre que a pessoa atinge um URL dentro de um recipiente rolável em vez de um salto reto. Definimos o "scroll_snap-type" para "x obrigatório", o que significa que, quando você aplica um pulo em qualquer objeto infantil em slides, o navegador rolava para esse objeto em particular, em vez de pular para ele imediatamente.
Vamos projetar os próprios slides, como segue:
A primeira e principal coisa a se concentrar neste trecho é considerar o tamanho do slide ao do controle deslizante cuidadosamente. Agora, os três últimos atributos são extremamente cruciais: Origin-Transformen, Transform e Scroll-Snap-Align. A posição em que uma transformação é executada é chamada de origem de transformação. Você pode alterar a colocação de componentes transformados usando o atributo de origem-transmissão. Solteiro, dois ou três valores podem ser utilizados para fornecer a propriedade de origem-transformar, com cada item indicando um deslocamento. A origem de uma transformação é configurada para o centro por padrão. Você pode girar, redimensionar, inclinar ou traduzir qualquer componente usando a propriedade CSS "Transform". O método CSS "escala ()" escala um componente no plano bidimensional. O atributo Scroll-Snap-Align Define o posicionamento real do recipiente como um alinhamento da região SNAP. Eles garantem que, sempre que você pular para um determinado slide, esse slide irá "encaixar" dentro do centro de viewport slider.
A imagem de saída que criamos tão longe do código anterior é mostrada abaixo:
Você pode observar a funcionalidade de rolagem e estalo contínua em operação clicando dentro do slider e depois pressionando os botões de seta.
Slider com botão de navegação
Você também pode incluir botões de navegação no slider, se quiser. Para esta intenção, adicionamos dois componentes "A" a cada slide no script html.
A classe "slide_prev" é para navegar de volta, enquanto a classe "slide_next" é para navegar para a frente. O "href" segura o hiperlink no slide que desejamos pular. Estes devem ser explicitamente ajustados. Esta propriedade fornece o URL da página de destino do link. O elemento não constituirá um link quando a propriedade "href" não estiver incluída.
Aqui, lidamos com a seção CSS do Código:
Esses botões podem ser estilizados e colocados da maneira que você quiser. Em nosso exemplo, adicionamos flechas para navegar para frente ou para trás.
Você pode ver as setas na seguinte imagem de saída:
Removendo a barra de rolagem do controle deslizante
Agora, se você observar, temos as flechas e a barra de navegação para rolar. Se você precisar remover a barra de rolagem, pode fazê -lo em um passo simples.
No script CSS, dentro do primeiro “.classe Slider ", basta definir o" Overflow-X "como" Hidden ". Isso vai esconder a barra de rolagem.
Este é o controle deslizante de saída:
Conclusão
Neste tópico, você aprendeu a adicionar um controle deslizante ao seu site usando HTML CSS. Nós apresentamos você à ideia de adicionar controles deslizantes usando CSS e o que são os controles deslizantes. Depois, começamos a criar um slider simples com texto. Projetamos o layout do controle deslizante utilizando o HTML e depois o denominamos com CSS no Sublime Text Editor. Usando elementos diferentes do script CSS, fizemos nosso controle deslizante com uma barra de rolagem. Na próxima etapa, criamos um botão de navegação no controle deslizante com CSS. Na fase final, mostramos como remover a barra de rolagem do controle deslizante e deixá -la navegar apenas pelos botões de navegação. Prática e concentração o ajudarão a pegar esses conceitos para criar um controle deslizante simples com CSS.