Cómo crear Sliders con Owl Carousel

owl-carousel

OWL Carousel

El Owl Carousel es un plugin que permite crear hermosos slider responsive para sitios web. Este plugin esta preparado para adaptarse a todos los dispositivos, se puede maquetar a gusto de forma fácil y tiene infinidad de opciones.
Las características que más llaman la atención es su fácil implementación y la forma que se adapta a los distintos dispositivos (responsive).

Características especiales

carac-owl-11 carac-owl-2

Cómo utilizar?

Descargamos el Owl Carousel, lo descomprimimos y luego llevamos la carpeta owl-carousel a nuestro proyecto web.dow-1

En la siguiente imagen muestra los archivos (.css y .js) que se encuentran dentro de la carpeta owl-carousel y que son obligatorios para que funcione nuestro slider.

dow-2

Ya con la carpeta owl-carousel en nuestro proyecto basta añadir en la cabecera o <head> de nuestra página los estilos y scripts necesarios + la llamada al plugin:

    <!-- Important Owl stylesheet -->
    <link rel="stylesheet" href="owl-carousel/owl.carousel.css">
     
    <!-- Default Theme -->
    <link rel="stylesheet" href="owl-carousel/owl.theme.css">
     
    <!-- jQuery 1.7+ -->
    <script src="js/jquery-1.9.1.min.js"></script>
     
    <!-- Include js plugin -->
    <script src="owl-carousel/owl.carousel.js"></script>

Obs: Ten en cuenta que el plugin funciona con jquery 1.7 o superior.

Configure su HTML
En el <body> de su página donde quieras añadir el carousel deberás poner algo como lo que sigue:

    <div id="owl-demo" class="owl-carousel owl-theme">
      <div class="item"><img src="image1.jpg" alt=""></div>
      <div class="item"><img src="image2.jpg" alt=""></div>
      <div class="item"><img src="image3.jpg" alt=""></div>
    </div>

Obs: No es necesario ningún marcado especial. Todo lo que necesitas es envolver tus divs (OWL funciona con cualquier tipo de elemento) en el interior del elemento contenedor. La clase “owl-carousel” es obligatorio para aplicar estilos adecuados que provienen de archivo owl.carousel.css

Etiquetas: ,