Owl Carousel
Owl Carousel es un control deslizante de carrusel de respuesta fácil de usar, actualizable, rápido y gratuito con estructura de código editable. Funciona con la biblioteca jquery y es compatible con muchos navegadores comunes.
También se pueden usar usando flechas direccionales, arrastrando y soltando y bucles automáticos.
Navegadores y dispositivos compatibles con Owl Carousel
-
- Google Chrome
- Mozilla Firefox
- Opera
- IE7/8/10/11
- iPad Safari
- iPod4 Safari
- Nexus 7 Chrome
- Galaxy S4
- Nokia 8s Windows8
Instalación Owl Carousel
Los códigos CSS y Javascript Owl Carousel deben agregarse a la página web HTML junto con los códigos Jquery.
Códigos CSS
Agregue los siguientes códigos CSS dentro de las etiquetas <head></head>.
<link rel="stylesheet" href="owl.carousel.min.css">
<link rel="stylesheet" href="owl.theme.default.min.css">Puede alojar los códigos CSS en el mismo lugar que el proyecto diseñado o llamarlos a través de https://owlcarousel2.github.io/OwlCarousel2/ agregando los siguientes códigos.
<link rel="stylesheet" href="https://owlcarousel2.github.io/OwlCarousel2/assets/owlcarousel/assets/owl.carousel.min.css">
<link rel="stylesheet" href="https://owlcarousel2.github.io/OwlCarousel2/assets/owlcarousel/assets/owl.theme.default.min.css">Nota: dado que llamar a los códigos CSS desde el exterior creará una desventaja en términos de rendimiento, sería más preciso llamarlos desde la misma área de almacenamiento que el proyecto.
Códigos JavaScript
Agregue los códigos Javascript que hacen que el Owl Carousel funcione en el campo después de que se cierren las etiquetas <body></body>.
Nota: Estos códigos también funcionan cuando se agregan a cualquier área de la página, pero agregar códigos <script></script> al final de la página será más ventajoso en términos de velocidad del sitio.
<script src="jquery.min.js"></script>
<script src="owl.carousel.js"></script>También puede llamar a códigos Javascript desde el exterior como códigos CSS. O puede guardarlo en el mismo archivo que el proyecto diseñado. Puede llamar a los códigos Javascript requeridos para «Owl Carousel Slider» a través de https://owlcarousel2.github.io/OwlCarousel2/ con el siguiente uso.
<script src="https://owlcarousel2.github.io/OwlCarousel2/assets/vendors/jquery.min.js"></script>
<script src="https://owlcarousel2.github.io/OwlCarousel2/assets/owlcarousel/owl.carousel.js"></script>Agregue la siguiente biblioteca de Javascript para realizar ajustes, como la cantidad de elementos que aparecerán de acuerdo con la configuración del bucle Owl Carousel, las teclas de flecha y los tamaños de pantalla.
Nota: estos códigos deben estar en los códigos jquery.min.js y owl.carousel.js; de lo contrario, Owl Carousel no funcionará.
Códigos HTML
Puede usar la versión más simple de Owl Carousel (sin teclas de flecha ni puntos deslizantes) con los códigos a continuación.
<div class="owl-carousel owl-theme">
<div class="item">
<h2>Slide 1</h2>
</div>
<div class="item">
<h2>Slide 2</h2>
</div>
<div class="item">
<h2>Slide 3</h2>
</div>
<div class="item">
<h2>Slide 4</h2>
</div>
<div class="item">
<h2>Slide 5</h2>
</div>
<div class="item">
<h2>Slide 6</h2>
</div>
<div class="item">
<h2>Slide 7</h2>
</div>
</div>Fuente:
https://owlcarousel2.github.io/OwlCarousel2/