OWL Carousel
OWL Carousel es otro plugin para añadir sliders o carousels a sus páginas Webs. Está preparado para todos los dispositivos, se puede maquetar al gusto fácilmente y tiene infinidad de opciones como otros plugins.
Las características que más nos llama la atención es su fácil implementación y la forma en la que se adapta a los distintos dispositivos.
Para utilizar este plugin tan solo tenemos que añadir en la cabecera o <head> de nuestra página los estilos y scripts necesarios + la llamada al plugin:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="js/owl.carousel.js"></script>
<script>
$(document).ready(function() {
$("#owl-slider").owlCarousel({
navigation : true, // Show next and prev buttons
slideSpeed : 300,
paginationSpeed : 400,
singleItem:true,
// Navigation
navigationText : ["Anterior","Siguiente"],
rewindNav : true,
scrollPerPage : true,
//Pagination
pagination : true,
paginationNumbers: false
});
});
</script>
Ten en cuenta que el plugin funciona con jquery 1.7 o superior.
En el <body> de su página donde quieras añadir el carousel deberás poner algo como lo que sigue:
<div id="owl-slider">
<div class="item">
<img src="images/owl1.jpg" alt="Owl Image">
<div class="title">Titular 1</div>
</div>
<div class="item">
<img src="images/owl2.jpg" alt="Owl Image">
<div class="title">Titular 2</div>
</div>
<div class="item">
<img src="images/owl3.jpg" alt="Owl Image">
<div class="title">Titular 3</div>
</div>
<div class="item">
<img src="images/owl4.jpg" alt="Owl Image">
<div class="title">Titular 4</div>
</div>
</div>
Visitar la página oficial
Autor
Escrito por Jose Aguilar - Director ejecutivo y tecnológico en JA Modules. Experto programador PrestaShop y Experto programador WordPress.
Hola. Gracias por el tutorial, muy instructivo.
Quisiera eliminar los dos laterales gris difuminado que hay en los laterales del carrusel de mi tienda online, pero no encuentro donde hacerlo.
Sería posible que alguien me lo indicara? Quedan bastante antiestéticos.
Saludos y gracias!!
Hola,
He estado revisando tu página personalmente y me he dado cuenta de que en tu plantilla, en las hojas de estilo hay unas reglas que están aplicando ese diseño a las flechas para avanzar y retroceder.
Si necesitas ayuda técnica para resolver este asunto, te facilito un enlace para que puedas contratar una bolsa de horas o mantenimiento para resolver este problema y todos los que tenga tu tienda.
El bono de horas lo puedes encontrar en -> https://www.jamodules.com/es/193-602-soporte-tecnico-bono-de-horas.html
Y los detalles de los mantenimientos mensuales -> https://www.jamodules.com/es/290-mantenimiento-web.html
Saludos
Hola quisiera saber si usando owl pudiera hacer un carousel de dos filas??, es decir q me salga 8 imagenes pero 4 en una fila y 4 en la de abajo!!
Hola,
Te recomiendo que visites la página del autor. Quizá ofrece esta posibilidad.
Saludos
Hola,
Quería saber si es posible quitar en Owl Carousel, el nombre de la persona que realiza la entrada
Hola,
Si estoy entendiendo bien la pregunta, entiendo que si.
Saludos
Hola, buenas noches! Quería consultar si es posible crear un carrusel de team con el nombre de cada integrante dentro de la imagen o por debajo de la misma y que vaya corriendo junto a la foto.. Y de ser posible cómo debería hacerlo o donde puedo verlo?
Hola,
Si, es posible, tienes que tener una base de conocimientos css para jugar con position relative de cada elemento del carrusel y position absolute del nombre del integrante.
Saludos
Buenos días. Tengo una plantilla de Leo Theme llamada Piece Furniture.
El banner superior funciona con un modulo llamado OWL Slideshow.
Me funciona perfectamente pero me gustaría saber si en ese banner puedo incluir videos, enlazando desde youtube.
En la configuración del módulo solo me deja subir imágenes, no me da opción de videos.
Gracias.
Hola,
El plugin owl Carousel 2 si que permite agregar videos.
Puedes ver un ejemplo en su página oficial:
https://owlcarousel2.github.io/OwlCarousel2/demos/video.html
Saludos
Hello jose,
I wanted to you this in my prestashop main front page.
Is it possible and how should i do it?
Thank you in advance.
Hello,
The best way to add this carousel in your store is to create a module that is visible in the hook displayHome with the characteristics indicated in this tutorial.
Regards
hola, donde l epuedo indicar que funcione solo sin hacer click en los controles, es posible??
Hola,
En la página oficial del plugin quizá puedes encontrar alguna opción para poner el carousel en automático. Las opciones las puedes ver en:
https://owlcarousel2.github.io/OwlCarousel2/docs/api-options.html
Saludos
Hola José, he seguido tus diferentes publicaciones, muy interesantes. Gracias por compartir el conocimiento.
Estoy tratando de usar el owlslider pero soy nocvato en estos temas de html, jquery y demás tecnologías web. Quisiera saber como logro activar el componente, ya que he seguido todos los pasos de la documentación y no logro que muestre las imagenes y mucho menos que las mueva.
Básicamente coloqué los enlaces en el , luego los con las imágenes y por último coloque en el footer el script.
Agradecería tu ayuda,
Juan Carlos
Hola,
Gracias por tu mensaje.
Resulta un poco difícil saber que está ocurriendo en tu sitio sin ver la página. Quizás si nos facilitas un enlace podemos ver el problema rápido. Por lo que comentas tan solo puede decirte que te asegures de que las rutas de las imágenes que estás usando existen o que identifiques correctamente el identificador del carousel o slider que deseas implementar.
Saludos
Buenas tengo problema para implementar el plugin en mi web, sigo todos los pasos correspondientes pero no logro visualizarlo.
Prueba owl
$(document).ready(function() {
$(«#owl-slider»).owlCarousel({
navigation : true, // Show next and prev buttons
slideSpeed : 300,
paginationSpeed : 400,
singleItem:true,
// Navigation
navigationText : [«Anterior»,»Siguiente»],
rewindNav : true,
scrollPerPage : true,
//Pagination
pagination : true,
paginationNumbers: false
});
});
Titular 1
Titular 2
Titular 3
Titular 4
Hola Jose, tus tutoriales me han sido de gran ayuda para aprender desarrollo web.
Estoy usando owl, pero intento crear un carrousel como los que implementa ahora facebook(pagina de empresa/compartir foto/carrousel), he encontrado este http://darsa.in/sly/ pero no puedo implementar un pie de pagina, la idea es que la segunda imagen quede cortada en un movil para que el usuario sepa que puede deslizar las imagenes y seguir viendo mas.
Como la galería de fotos de este sitio (en el móvil se aprecia lo que digo)
https://www.google.es/intl/es_es/nexus/5x/
Si se mira en un móvil se ve la imagen cortada invitando al usuario a deslizarla, pero me falta poder implementar un pie de pagina para la descripción del producto. Mi objetivo principal es el móvil.
Si conoces algún plugin que lo haga te agradeceria mucho que me dijeras cual.
Un saludo y gracias por tu tiempo y enhorabuena por tu trabajo.
Para poder tener 2 o + carrouseles.
Añadir una clase a
quedando
Y luego llamarlo asi.
$(«.nuevaclase»).owlCarousel({
Hola! Estupendo tutorial. Me gustaría saber si es posible mostrar el carousel en dos filas. Es decir, mostrar los items con sus flechas de desplazamiento en dos filas. Gracias!
Hola,
Creo que es posible hacerlo creando 2 carousels distintos. Uno encima del otro. Eso no sirve?
Saludos
Hola, JOSE,
Excelente tutorial, habia algunos parametros que no conocia y púde configurarlos gracias a tu articulo!
Tengo una duda a ver si tu me puedes ayudar:
Te comento que puse 2 owl diferentes en mi pagina, pero quiero editar la posicion del icono para cambiar de pagina (navigationText) del segundo sin afectar el primero.
Como puedo lograrlo?
La clase con la que movi los controles fue:
.owl-controls{
position: absolute;
top: -70px;
left: 72%;
}
El detalle es que esta clase me esta moviendo los controles en ambos carruseles.
Como puedo editar la posicion del segundo sin afectar el primero?
Muchas gracias !!!
Hola,
Pues no estoy seguro si es posible tener 2 carousels en la misma página. Eso debe saberlo mejor el autor del plugin:
http://www.owlcarousel.owlgraphic.com/
Saludos
oye, si quisiera poner uno varias veces en mi pagina ¿como lo podría hacer?
si, es posible. tan solo deberás realizar la llamada al plugin de otra forma. en vez de:
$(«#owl-slider»).owlCarousel({
Podrías hacer:
$(«.owl-slider»).owlCarousel({
Lógicamente deberás añadir el class correspondiente al div que contiene el slider.
Saludos