Owl Carousel: configuración y conectividad

Muchas personas en su propio sitio web quieren verLos controles deslizantes 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 con HTML, CSS y JavaScript, pero esto no siempre tiene sentido. Pasarás bastante tiempo, aunque hay bastantes soluciones listas para usar en Internet que facilitan enormemente tu vida y hacen que tu sitio web sea mucho más atractivo. En este artículo, discutiremos una de estas soluciones, llamada Owl Carousel. Configurar este control deslizante es increíblemente simple, por lo que incluso un principiante puede sobrellevarlo. Ahora descubrirá qué representa este control deslizante, así como otros detalles importantes. La configuración del Owl Carousel se realiza paso a paso, por lo que debe estudiar este material solo en orden.

¿Qué es y por qué vale la pena elegir este control deslizante?

Owl Carousel, cuyo entorno seráConsiderado en este artículo, es un complemento muy efectivo que agrega a su página un deslizador agradable y conveniente que facilitará en gran medida su trabajo en el sitio, lo que le permite ahorrar mucho tiempo, esfuerzo y dinero. ¿Cuáles son las ventajas de este complemento en particular, porque hay muchos controles deslizantes en la web? El hecho es que este control deslizante le ofrece varias docenas de opciones de personalización, lo que le permitirá hacer que su página sea única e irrepetible. Este es un complemento adaptable que funcionará en todas las versiones de navegadores, y se puede conectar fácilmente a WordPress y a otros populares CMS. En general, las ventajas de este control deslizante es mucho, por lo que definitivamente debe hacer una elección a su favor. Sin embargo, antes de comenzar a configurar Owl Carousel, este complemento debe ser descargado.

Descargar

La configuración de Owl Carousel 2 no es posible si no lo haceslo descargué a su computadora, y dado que esta es una instrucción paso a paso, vale la pena comenzar desde el principio. Por lo tanto, el programa se puede descargar con la ayuda de los administradores de paquetes, pero estas son herramientas avanzadas de desarrollo, por lo que aquí se le indicará cómo obtener este complemento de la manera estándar. Debe ir al sitio oficial del complemento y descargar su última versión. Después de eso, todos los archivos descargados deben transferirse al directorio de su sitio, preparando una carpeta conveniente, que se llama igual que el plugin. Tenga en cuenta que este complemento está asociado a jQuery, por lo que también debe tener esta biblioteca disponible. Bueno, cuando descargue este complemento, tendrá que dar el siguiente paso, a saber, la configuración del control deslizante de Owl Carousel 2.

CSS

En Owl Carousel 1.3 configuraciones siguen siendo casi las mismas que en la segunda versión más nueva, solo se agregan nuevas funciones. Sin embargo, la información básica será la misma, comenzando con la adición de CSS a su documento. Entonces, el primer paso es agregar una línea al código HTML <link rel = "stylesheet" href = "owlcarousel / owl.carousel.min.css">. ¿Qué te da? Esta es una cadena que carga los estilos necesarios en el sitio para mostrar el control deslizante. En esto puedes terminar, haciendo el procesamiento visual tú mismo. Sin embargo, hay una solución más conveniente y rápida. También puedes agregar una línea <link rel = "stylesheet" href = "owlcarousel / owl.theme.default.min.css">, que también carga un tema estándardeslizador, que lo hace instantáneamente listo para usar. Puede editar algunos estilos haciendo que su control deslizante sea más único e inusual, y también más adecuado para su contenido. Naturalmente, la configuración de Owl Carousel en ruso sería muy conveniente, sin embargo, cada persona que crea sitios web debe entender que sin saber inglés, no puede hacerlo.

Conectando JavaSpript

Naturalmente, el control deslizante no funcionará sin JS,por lo que también debe tener cuidado de conectar el archivo apropiado que contiene el código requerido. Para hacer esto, debe insertar una línea de código de la documentación, pero con la observancia obligatoria de una condición. Todo el mundo sabe que JS es un lenguaje de programación que ejecuta todos los comandos en orden, respectivamente, 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. Más con JS en el caso de este control deslizante, no necesita hacer nada.

Hacer código HTML

Bueno, conectaste el control deslizante, ahora es el momentopara emitir y ajustar En primer lugar, debe escribir el código HTML para que el control deslizante aparezca generalmente en su página. Para hacer esto, necesita crear un contenedor, que contendrá las diapositivas. Puede hacer esto utilizando la etiqueta div, que desea asignar a la clase owl-carrusel. Es esta clase la que asegura que todos los estilos que están relacionados con el control deslizante se activarán. También puedes registrar otra clase - owl-theme. Es útil para usted en el caso de que decida usar el diseño predeterminado o tome una versión estándar del control deslizante como base para futuros trabajos.

Luego debe agregar cada diapositiva en un contenedor separado con una etiqueta div. Naturalmente, puede usar otras etiquetas, pero lo mejor para los controles deslizantes es esta etiqueta.

Llamar al plugin

Bueno, lo último que necesita hacer para que su sitio tenga un control deslizante listo para usar es usar este bloque de código:

$ (document) .ready (function () {

$ (".wl-carrusel"). owlCarousel ();

});

Asegura que el deslizador comiencefunción, es decir, desplazarse por el contenido cuando se carga su página. Con el mismo código, puede conectar Owl Carousel a WordPress. La configuración de este complemento es numerosa y diversa, y ahora aprenderá sobre los puntos más importantes.

Ajustar el aspecto y la funcionalidad del control deslizante

Entonces, qué comandos puedes usar,para ajustar su control deslizante? En primer lugar, debe recordar el comando de elementos, ya que con él puede especificar un número específico de diapositivas en su control deslizante. El comando de bucle le permite elegir si desea hacer un bucle en el control deslizante o detener el desplazamiento en el último elemento. También está el comando Arrastrar, que tiene varias opciones, por ejemplo, el mouse y el tacto. En el primer caso, puede hacer que los elementos de su control deslizante se puedan desplazar con un mouse recortado, y en el segundo caso, con el toque (este comando es adecuado para dispositivos móviles). Otro comando importante es el nav, que incluye la visualización de flechas de navegación. Junto con él puede usar el comando navText, agregando etiquetas a los botones de navegación. Además, no debe olvidar el comando de reproducción automática, que le permite activar y desactivar el inicio automático de la presentación de diapositivas del control deslizante cuando se carga la página. Junto con este comando, también puede usar autoplayTimeout, para lo cual puede especificar un valor específico en milisegundos que determinará el tiempo transcurrido entre el volteo automático de cada diapositiva.

Si usa un diseño web adaptativo, entoncesel diseño de su página cambia automáticamente según el dispositivo en el que se visualice, luego debe recordar el comando receptivo, que le permite establecer el número de diapositivas que se muestran según el ancho de la pantalla en la que se visualiza la página.