Control deslizante HTML CSS
Los controles deslizantes son un tipo de presentación de diapositivas de datos que podría incluir fotos, texto, símbolos e hipervínculos, entre otras cosas. Es un componente de la página web que se desliza hacia adelante hacia atrás o tal vez en cualquier dirección. Es un método para presentar material en un sitio web en una sola región donde el material puede deslizarse hacia la posición, lo que permite la presentación de grandes volúmenes de material en un solo lugar.
Para impulsar la funcionalidad de JavaScript, se implementan varios controles deslizantes de CSS junto con ella. Sin embargo, ocasionalmente es posible que desee un control deslizante básico y compacto creado únicamente utilizando HTML y CSS. Es increíblemente liviano sin JavaScript y se ejecuta significativamente más rápido mientras navega.
Creando un control deslizante con CSS
Para crear un control deslizante de texto receptivo simple usando HTML y CSS, el primer paso que tomaremos es estructurar el diseño del control deslizante. Creará espacio para el control deslizante donde encajará.
En el código anterior, ejercimos el elemento. Esta etiqueta se refiere a la etiqueta de división. Dentro de un archivo HTML, especifica una división o segmento. Funciona como un contenedor que se utiliza para agrupar los componentes HTML. Después de eso, CSS se usa para diseñar cosas. El "control deslizante" es el componente del sitio web donde se mostrará el control deslizante. El "control deslizante" sirve como pantalla o ventana para presentar todas las diapositivas que crearemos. Las diapositivas se mantendrán en "diapositivas". Este "control deslizante" es el componente que se desplaza y genera la apariencia del control deslizante en el "control deslizante". Mientras que "diapositiva" se refiere a cada diapositiva utilizada en el control deslizante.
Tenga en cuenta que necesitará tener la clase de "deslizamiento" y una "identificación" distinta para cada diapositiva que cree. En este script, hemos creado cuatro clases de "diapositivas", cada una con una "ID" única como: "Slides_1" para la primera diapositiva, "Slides_2" para la segunda diapositiva, "Slides_3" para la tercera diapositiva y "Slides_4" para la cuarta diapositiva. También hemos definido el "slide_text" que se muestra en cada diapositiva respectivamente, dentro de la etiqueta "span".
Ahora, generaremos el script CSS.
Puedes usar lo que quieras para un "control deslizante". Aquí, hemos utilizado el Flexbox. Puede diseñar rápidamente HTML con un diseño CSS FlexBox. Utilizando columnas y filas, el Flexbox hace que el posicionamiento vertical y horizontal de los objetos sea directo. Para llenar el área, los objetos se "flexionarían" a varios tamaños. Sin embargo, puede utilizar la red CSS si lo desea.
El "control deslizante" simplemente ajustará el tamaño del control deslizante. Esta propiedad de "ancho" ajustará el ancho del control deslizante. El "ancho máximo" de un objeto se especifica mediante el atributo de "ancho máximo". La altura del objeto se ajusta automáticamente cuando el contenido excede el ancho de límite. El atributo de ancho máximo es ineficaz cuando el contenido proporcionado es menor que el ancho máximo. La colocación de un objeto con "Posición: relativa"; es relativo a esa posición habitual.
El siguiente elemento de diapositivas ahora se diseñará en CSS:
El atributo Overflow-X determina si el contenido de un elemento de nivel de bloque debe recortarse, desplazarse o mostrar datos de desbordamiento. Cualquier cosa que no se ajuste fácilmente dentro de la ventana gráfica de "control deslizante" solo se verá visible a través del desplazamiento cuando habilite "Overflow-X" para desplazarse. Lo siguiente que hicimos fue poner el "scroll_behavior" en "suave". El atributo de scroll-behavior determina si el movimiento de desplazamiento se anima suavemente cada vez que la persona golpea una URL dentro de un contenedor desplazable en lugar de un salto recto. Hemos establecido el "scroll_snap-type" en "x obligatorio", lo que significa que cuando aplica un enlace de salto a cualquier objeto infantil en las diapositivas, el navegador se desplazaría a ese objeto particular sin problemas en lugar de saltar a él de inmediato.
Diseñemos las diapositivas en sí mismas, como sigue:
La primera y principal cosa en la que centrarse en este fragmento es considerar el tamaño de la diapositiva al del control deslizante con cuidado. Ahora, los últimos tres atributos son extremadamente cruciales: transformación de origen, transformación y scroll-snap-align. La posición en la que se ejecuta una transformación se llama origen transformador. Puede alterar la colocación de componentes transformados utilizando el atributo de origen transformado. Se pueden utilizar valores individuales, dos o tres se pueden utilizar para proporcionar la propiedad de origen transformado, cada elemento que indica un desplazamiento. El origen de una transformación está configurado en el centro de forma predeterminada. Puede girar, cambiar el tamaño, inclinar o traducir cualquier componente utilizando la propiedad CSS "Transformar". El método CSS "escala ()" escala un componente en el plano bidimensional. El atributo Scroll-SNAP-Align define el posicionamiento Snap real del contenedor como una alineación de la región Snap. Se aseguran de que cada vez que salte a un cierto diapositivo, esa diapositiva se "romperá" dentro del centro de la ventana deslizante.
La imagen de salida que creamos tan lejos del código anterior se muestra a continuación:
Puede observar la funcionalidad de desplazamiento y rango sin problemas en funcionamiento haciendo clic en el interior del control deslizante y luego presionando los botones de flecha.
Control deslizante con botón de navegación
También puede incluir botones de navegación en el control deslizante si lo desea. Para esta intención, hemos agregado dos componentes "A" a cada diapositiva en el script HTML.
La clase "slide_prev" es para navegar hacia atrás, mientras que la clase "slide_next" es para navegar hacia adelante. El "href" mantiene el hipervínculo hasta la diapositiva que deseamos saltar. Estos deben ajustarse explícitamente. Esta propiedad proporciona la URL de la página de destino del enlace. El elemento no constituirá un enlace cuando no se incluya la propiedad "href".
Aquí, tratamos con la sección CSS del código:
Estos botones pueden ser diseñados y colocados de cualquier manera que desee. En nuestro ejemplo, hemos agregado flechas para navegar hacia adelante o hacia atrás.
Puede ver las flechas en la siguiente imagen de salida:
Eliminar la barra de desplazamiento del control deslizante
Ahora, si observa, tenemos las flechas y la barra de navegación para desplazarse hacia atrás o. Si necesita quitar la barra de desplazamiento, puede hacerlo en un paso simple.
En el script CSS, dentro del primero ".clase deslizante ", solo configure el" Overflow-X "en" Hidden ". Esto ocultará la barra de desplazamiento.
Este es el control deslizante de salida:
Conclusión
En este tema, ha aprendido a agregar un control deslizante a su sitio web utilizando HTML CSS. Le presentamos la idea de agregar controles deslizantes usando CSS y lo que son los controles deslizantes. Después, comenzamos a crear un control deslizante simple con texto. Diseñamos el diseño del control deslizante utilizando el HTML y luego lo diseñamos con CSS en el editor de texto sublime. Usando diferentes elementos del script CSS, hicimos nuestro control deslizante con una barra de desplazamiento. En el siguiente paso, creamos un botón de navegación en el control deslizante con CSS. En la fase final, le mostramos cómo eliminar la barra de desplazamiento del control deslizante y dejar que navegue solo a través de los botones de navegación. La práctica y la concentración lo ayudarán a obtener estos conceptos para crear un control deslizante simple con CSS.