Muchas personas en su propio sitio quieren ver controles deslizantes: estos son bloques que muestran un elemento de contenido en la pantalla y, después de un cierto período de tiempo, cambian este contenido a otro. Naturalmente, cada desarrollador web puede crear un control deslizante de forma independiente utilizando HTML, CSS y JavaScript, pero esto no siempre tiene sentido. Pasará bastante tiempo, a pesar de que existen bastantes soluciones listas para usar en Internet que hacen su vida mucho más fácil y hacen que su sitio sea mucho más atractivo. Este artículo se centrará en una de estas soluciones llamada Owl Carousel. Configurar este control deslizante es increíblemente simple, por lo que incluso un principiante puede manejarlo. Ahora aprenderá qué es este control deslizante, así como otros detalles importantes. Configurar Owl Carousel es un proceso paso a paso, por lo que debe estudiar este material solo en orden.
¿Qué es y por qué debería elegir este control deslizante en particular?
Owl Carousel, cuya configuración se discutirá en este artículo, es un complemento muy efectivo que agrega un control deslizante hermoso y conveniente a su página, lo que facilitará enormemente su trabajo en el sitio.ahorrando mucho tiempo, esfuerzo y dinero. ¿Cuáles son las ventajas de este complemento en particular, porque hay muchos controles deslizantes en la Web? El caso es que este slider te ofrece decenas de opciones de personalización, que te permitirán hacer tu página única e inimitable. Es un complemento receptivo que funcionará en todas las versiones del navegador y se puede conectar fácilmente a WordPress y otros CMS populares. En general, este control deslizante tiene muchas ventajas, por lo que definitivamente debe elegir a su favor. Sin embargo, antes de comenzar a configurar Owl Carousel, este complemento aún debe cargarse.
Descargar
La configuración de Owl Carousel 2 no es posible si no lo ha descargado a su computadora, y dado que esta es una instrucción paso a paso, debe comenzar desde el principio. Entonces, el programa se puede descargar usando administradores de paquetes, pero estas son herramientas avanzadas para desarrolladores, por lo que aquí le diremos cómo obtener este complemento de la manera estándar. Debe ir al sitio web oficial del complemento y descargar su última versión. Después de eso, todos los archivos descargados deben transferirse al directorio de su sitio, habiendo preparado una carpeta conveniente, que se llama igual que el complemento. Tenga en cuenta que este complemento se incluye con jQuery, por lo que también debe tener esa biblioteca disponible. Bueno, una vez que haya descargado este complemento, deberá ocuparse del siguiente paso, que es configurar el control deslizante Owl Carousel 2.
CSS
BLa configuración de Owl Carousel 1.3 sigue siendo casi la misma que en la nueva versión 2, solo se agregan nuevas funciones. Sin embargo, la información básica será la misma, comenzando por agregar CSS a su documento. Entonces, el primer paso es agregar la línea. ¿Qué te da ella? Esta es una cadena que carga los estilos necesarios en el sitio para mostrar el control deslizante. Aquí es donde puede terminar haciendo el procesamiento visual usted mismo. Sin embargo, existe una solución más cómoda y rápida. También puede agregar una línea que también cargue el tema predeterminado del control deslizante, dejándolo listo para usar al instante. Puede editar algunos de los estilos para hacer que su control deslizante sea más único y diferente, y más adecuado para su contenido. Naturalmente, la configuración de Owl Carousel en ruso sería muy conveniente, pero cada persona que crea sitios web debe comprender que no puede prescindir del conocimiento del inglés.
Conexión JavaSpript
Por supuesto, el control deslizante no funcionará sin JS, por lo que también debe tener cuidado de incluir el archivo apropiado que contenga el código necesario. Para hacer esto, debe insertar una línea de código de la documentación, sin embargo, se debe cumplir una condición. Todo el mundo sabe que JS es un lenguaje de programación que ejecuta todos los comandos en orden, por lo que en este caso debe agregar esta línea de código después de la línea que agrega la biblioteca jQuery a su documento. Mas con JS en el caso de este slider, no tienes nada que vernecesidad.
Codificación HTML
Bueno, ha conectado el control deslizante, ahora es el momento de diseñarlo y personalizarlo. En primer lugar, debe escribir el código HTML para que el control deslizante aparezca en su página. Para hacer esto, debe crear un contenedor que contenga las diapositivas. Esto se puede hacer usando la etiqueta div, a la que se le debe asignar la clase carrusel de búhos. Es esta clase la que garantiza que se activarán todos los estilos relacionados con el control deslizante. También puede escribir otra clase: tema de búho. Será útil si decide utilizar el diseño predeterminado o tomar la versión estándar del control deslizante como base para el trabajo posterior.
Luego debe agregar cada diapositiva en un contenedor separado con una etiqueta div. Por supuesto, puede usar otras etiquetas, pero esta etiqueta es la mejor para los controles deslizantes.
Complemento de llamada
Y lo último que debe hacer para tener un control deslizante listo para usar en su sitio es usar este bloque de código:
$(documento).listo(función(){
$(".carrusel-búho").carruselbúho();
});
Se asegura de que el control deslizante comience a funcionar, es decir, desplazarse por el contenido, cuando se carga la página. Con el mismo código, puedes conectar Owl Carousel a WordPress. Las configuraciones de este complemento son numerosas y variadas, y ahora aprenderá sobre los puntos más importantes.
Configurar el aspecto y la funcionalidad del control deslizante
Entonces, ¿qué comandos puedes usar para personalizar tu control deslizante? En primer lugar, debe recordar el comando de elementos, porque con él puede establecer un número específico de diapositivas en su control deslizante. El comando de bucle le permitirá elegir si hacer un bucle con el control deslizante o detener el desplazamiento en el último elemento. También está el comando Arrastrar, que tiene varias opciones, como el mouse y el toque. En el primer caso, puede hacer que los elementos de su control deslizante se puedan deslizar con el mouse presionado, y en el segundo caso, con la ayuda de un toque (este comando es adecuado para dispositivos móviles). Otro comando importante es nav, que permite mostrar las flechas de navegación. Además, puede usar el comando navText para agregar etiquetas a los botones de navegación. Además, no debe olvidarse del comando de reproducción automática, que le permite habilitar y deshabilitar el inicio automático de las diapositivas de su control deslizante cuando se carga la página. Con este comando, también puedes usar autoplayTimeout, para lo cual puedes establecer un valor específico en milisegundos, que determinará el tiempo entre el giro automático de cada una de las diapositivas.
Si usa un diseño web receptivo, es decir, el diseño de su página cambia automáticamente según el dispositivo en el que se ve, entonces definitivamente debe recordar el comando receptivo, que le permite establecer la cantidad de diapositivas para mostrar según el ancho de la pantalla en la que se está viendo la página.
