Carrusel responsivo y touch con jQuery y OWL Carousel, sin duda uno de los grandes retos es crear un carrusel responsivo para mostrar contenido en la web, bueno pues no tienes que pensar mucho en realizar este carrusel, que puedes encontrarte con un plugin que tiene resuelto el problema, su nombre es: OWL Carousel JQuery.
Lo que tienes que hacer es entender como aplicarlo a tu sitio web y tener en consideración las propiedades que puedes cambiar.
Lo primero es visitar el sitio: http://owlgraphic.com/owlcarousel/ para poder apoyarte de la documentación, los ejemplos y algunos demostraciones con código que se tienen en el sitio.
En esta implementación vamos a utilizar la inclusión de jQuery algunos estilos y un conjunto de imagenes con texto.
1.- Para iniciar con este plugin incluimos jQuery y el plugin OWL como lo indica la documetación
<!-- Important Owl stylesheet --> <link rel="stylesheet" href="http://owlgraphic.com/owlcarousel/owl-carousel/owl.carousel.css"> <!-- Default Theme --> <link rel="stylesheet" href="http://owlgraphic.com/owlcarousel/owl-carousel/owl.theme.css"> <!-- jQuery 1.7+ --> <script src="http://owlgraphic.com/owlcarousel/assets/js/jquery-1.9.1.min.js"></script> <!-- Include js plugin --> <script src="http://owlgraphic.com/owlcarousel/owl-carousel/owl.carousel.js"></script>
2.- Colocamos en el body el contenido html que quermos mostrar.
<div id="owl-example" class="owl-carousel"> <div> Your Content </div> <div> Your Content </div> <div> Your Content </div> <div> Your Content </div> <div> Your Content </div> <div> Your Content </div> <div> Your Content </div> ... </div>
3.- Crea un script para mostrar dicho contenido.
$(document).ready(function() {
$("#owl-example").owlCarousel();
});
Documento final quedaría de la siguiente forma, considerando que el contenido tiene que ser reemplazado por imágenes,texto,etc.
<!DOCTYPE html>
<html>
<title>HTML Tutorial</title>
<!-- Important Owl stylesheet -->
<link rel="stylesheet" href="http://owlgraphic.com/owlcarousel/owl-carousel/owl.carousel.css">
<!-- Default Theme -->
<link rel="stylesheet" href="http://owlgraphic.com/owlcarousel/owl-carousel/owl.theme.css">
<!-- jQuery 1.7+ -->
<script src="http://owlgraphic.com/owlcarousel/assets/js/jquery-1.9.1.min.js"></script>
<!-- Include js plugin -->
<script src="http://owlgraphic.com/owlcarousel/owl-carousel/owl.carousel.js"></script>
<body>
<div id="owl-example" class="owl-carousel">
<div> Your Content </div>
<div> Your Content </div>
<div> Your Content </div>
<div> Your Content </div>
<div> Your Content </div>
<div> Your Content </div>
<div> Your Content </div>
...
</div>
<script>
$(document).ready(function() {
$("#owl-example").owlCarousel();
});
</script>
</body>
</html>
The post Carrusel responsivo y touch con jQuery y OWL Carousel appeared first on Develoteca.