Posted on

[JQuery] Owl Carousel: Ejemplo Basico

Owl Carousel es un plugin para crear carouseles o sliders de imagenes o de elementos HTML como texto ,etc. Sirve mucho para dar un toque diferente a nuestro sitio o aplicacion web, ademas de ser útil en dispositivos mobiles.

El plugin es facil de usar, solo necesitamos tener el jquery y el paquete de Owl Carousel:

Al final del articulo les dejo un paquete de descarga con el ejemplo que yo realice, con código e imágenes.

Paso 1: Incluir archivos

En este paso vamos a incluir los archivos necesarios de jqeury y owl carousel.

<link rel=”stylesheet” type=”text/css” href=”owl/assets/owl.carousel.min.css”>

<link rel=”stylesheet” type=”text/css” href=”owl/assets/owl.carousel.min.css”>

<link rel=”stylesheet” type=”text/css” href=”owl/assets/owl.theme.green.min.css”>

<script type=”text/javascript” src=”jquery.min.js”></script>

<script type=”text/javascript” src=”owl/owl.carousel.min.js”></script>

Paso 2: Agregar las imágenes al carousel

Vamos a agregar las imagenes al carousel, en realidad pueden ser imagenes, videos, texto, o cualquier contenido html.


<div class="owl-carousel owl-theme">

<div class="item">
    	<img src="img1.jpg">
    </div>
<div class="item">
    	<img src="img2.jpg">
    </div>

</div>

En el codigo podemos ver un div general que engloba todo el contenido con clase “owl-carousel” y dentro hay varios div con la clase “item”, estos representan cada elemento del carousel.

Dentro de los elementos div con clase “item” vamos a colocar el contenido que queremos mostrar, en mi caso son 2 elementos y cada elemento tiene una imagen diferente.

Paso 3: Activar el carousel

Ya tenemos casi todo listo, ahora falta llamar las funciones de owl carousel para crear el carousel de acuerdo a la informacion agregada y los parametros necesarios.


$('.owl-carousel').owlCarousel({
    loop:true,
    margin:10,
    nav:true,
    responsive:{
        0:{
            items:5
        },
        600:{
            items:3
        },
        1000:{
            items:1
        }
    }
});

Y con esto activamos el carousel y ya podremos navegarlo.

Las configuraciones son, activar el loop, para que después de finalizar el recorrido vuelva a empezar desde el principio, agregar un margen de 10 pixeles entre cada elemento, activar la navegacion.

Un tema un poco complejo es el responsive, ya que se agregan los pixeles y los elementos que se van a mostrar, por ejemplo en 1000 o mas pixeles se muestra 1 elemento, pero en 600 se muestran 3 elementos.

Descargar

A continuacion los archivos del ejemplo para descargar:

Espero les sirva el ejemplo.

Leave a Reply

Your email address will not be published. Required fields are marked *