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>

Ver demostración

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.
Te ha servido? Valora esta entrada!
(6 votos, promedio: 5 de 5)
Comparte en las redes sociales
¿Buscas trabajo de programador?

26 respuestas a “OWL Carousel”

  1. Enric Gibert dice:

    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!!

  2. Alfredo Valbuena dice:

    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!!

  3. Ana dice:

    Hola,
    Quería saber si es posible quitar en Owl Carousel, el nombre de la persona que realiza la entrada

  4. Alejandro dice:

    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?

    • Jose Aguilar dice:

      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

  5. Jose Manuel dice:

    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.

  6. 00336 dice:

    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.

    • Jose Aguilar dice:

      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

  7. eugenia dice:

    hola, donde l epuedo indicar que funcione solo sin hacer click en los controles, es posible??

  8. Juan Carlos Díazgranados M. dice:

    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

    • Jose Aguilar dice:

      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

  9. Dahiana dice:

    Buenas tengo problema para implementar el plugin en mi web, sigo todos los pasos correspondientes pero no logro visualizarlo.

    • Dahiana dice:

      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

  10. Alvaro Murcia Aniorte dice:

    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.

  11. Javier dice:

    Para poder tener 2 o + carrouseles.
    Añadir una clase a
    quedando
    Y luego llamarlo asi.
    $(«.nuevaclase»).owlCarousel({

  12. Pilar dice:

    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!

  13. JoelMG dice:

    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 !!!

  14. jona dice:

    oye, si quisiera poner uno varias veces en mi pagina ¿como lo podría hacer?

    • Jose Aguilar dice:

      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

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.

Ver más sobre