jquery - oreo - barra de navegacion tv box
Carrusel de búhos, haciendo navegación personalizada. (7)
Así que tengo un carrusel de búhos que contiene tres imágenes. También agregué flechas de navegación personalizadas (imágenes .png) en los lados izquierdo y derecho. Sin embargo, esas flechas son actualmente inútiles, porque no puedo encontrar la forma de hacer que realmente cambien de imagen de mi Owl Carousel. Busqué sin cesar y no puedo encontrar la solución. ¿Algunas ideas?
Crea tu navegación personalizada y dales las clases que deseas, entonces estás listo para comenzar. Es tan simple como eso.
Veamos un ejemplo:
<div class="owl-carousel">
<div class="single_img"><img src="1.png" alt=""></div>
<div class="single_img"><img src="2.png" alt=""></div>
<div class="single_img"><img src="3.png" alt=""></div>
<div class="single_img"><img src="4.png" alt=""></div>
</div>
<div class="slider_nav">
<button class="am-next">Next</button>
<button class="am-prev">Previous</button>
</div>
En su archivo js puede hacer lo siguiente:
$(".owl-carousel").owlCarousel({
// you can use jQuery selector
navText: [$(''.am-next''),$(''.am-prev'')]
});
El siguiente código funciona para mí en el carrusel de búho .
https://github.com/OwlFonk/OwlCarousel
$(".owl-carousel").owlCarousel({
items: 1,
autoplay: true,
navigation: true,
navigationText: ["<i class=''fa fa-angle-left''></i>", "<i class=''fa fa-angle-right''></i>"]
});
Para OwlCarousel2
https://owlcarousel2.github.io/OwlCarousel2/docs/api-options.html
$(".owl-carousel").owlCarousel({
items: 1,
autoplay: true,
nav: true,
navText: ["<i class=''fa fa-angle-left''></i>", "<i class=''fa fa-angle-right''></i>"]
});
En owl carousel 2 puedes usar íconos de fuentes impresionantes o cualquier imagen personalizada en la opción navText como esta:
$(".category-wrapper").owlCarousel({
items: 4,
loop: true,
margin: 30,
nav: true,
smartSpeed: 900,
navText: ["<i class=''fa fa-chevron-left''></i>","<i class=''fa fa-chevron-right''></i>"]
});
Lo hice con CSS, es decir, agregando clases para flechas, pero también puedes usar imágenes.
Bellow es un ejemplo con fontAwesome:
JS:
owl.owlCarousel({
...
// should be empty otherwise you''ll still see prev and next text,
// which is defined in js
navText : ["",""],
rewindNav : true,
...
});
CSS
.owl-carousel .owl-nav .owl-prev,
.owl-carousel .owl-nav .owl-next,
.owl-carousel .owl-dot {
font-family: ''fontAwesome'';
}
.owl-carousel .owl-nav .owl-prev:before{
// fa-chevron-left
content: "/f053";
margin-right:10px;
}
.owl-carousel .owl-nav .owl-next:after{
//fa-chevron-right
content: "/f054";
margin-right:10px;
}
Usando imagenes
.owl-carousel .owl-nav .owl-prev,
.owl-carousel .owl-nav .owl-next,
.owl-carousel .owl-dot {
//width, height
width:30px;
height:30px;
...
}
.owl-carousel .owl-nav .owl-prev{
background: url(''left-icon.png'') no-repeat;
}
.owl-carousel .owl-nav .owl-next{
background: url(''right-icon.png'') no-repeat;
}
Tal vez alguien encuentre esto útil :)
Necesitas habilitar la navegación y editar la navegaciónTexto:
> Suponiendo que es la version 1.3.2
owlgraphic.com/owlcarousel/#customizing
Nota : Parece que el sitio para Owl 1.3 ahora está inactivo, por lo que aquí hay un ejemplo de Codepen bifurcado .
$("#owl-example").owlCarousel({
navigation: true,
navigationText: ["<img src=''myprevimage.png''>","<img src=''mynextimage.png''>"]
});
> Suponiendo que es la version 2 :
https://owlcarousel2.github.io/OwlCarousel2/docs/api-options.html#nav
$("#owl-example").owlCarousel({
nav: true,
navText: ["<img src=''myprevimage.png''>","<img src=''mynextimage.png''>"]
});
Sugerencia personal: use Slick over Owl
Puede usar una combinación JS y SCSS / Fontawesome para los botones Anterior / Siguiente.
En su JS (esto incluye solo lecturas de pantalla / clases de accesibilidad con la Fundación Zurb) :
$(''.whatever-carousel'').owlCarousel({
... ...
navText: ["<span class=''show-for-sr''>Previous</span>","<span class=''show-for-sr''>Next</span>"]
... ...
})
En su SCSS esto:
.owl-theme {
.owl-nav {
.owl-prev,
.owl-next {
font-family: FontAwesome;
//border-radius: 50%;
//padding: whatever-to-get-a-circle;
transition: all, .2s, ease;
}
.owl-prev {
&::before {
content: "/f104";
}
}
.owl-next {
&::before {
content: "/f105";
}
}
}
}
Para la familia de fuentes FontAwesome, uso el código de inserción en el encabezado del documento:
<script src="//use.fontawesome.com/123456whatever.js"></script>
Hay varias maneras de incluir FA, golpes / personas, pero creo que esto es bastante rápido y, como estoy usando el paquete web, puedo vivir con esa llamada al servidor js adicional.
Y para actualizar esto , también existe esta opción JS para flechas un poco más complejas, aún con accesibilidad en mente:
$(''.whatever-carousel'').owlCarousel({
navText: ["<span class=/"fa-stack fa-lg/" aria-hidden=/"true/"><span class=/"show-for-sr/">Previous</span><i class=/"fa fa-circle fa-stack-2x/"></i><i class=/"fa fa-chevron-left fa-stack-1x fa-inverse/" aria-hidden=/"true/"></i></span>","<span class=/"fa-stack fa-lg/" aria-hidden=/"true/"><span class=/"show-for-sr/">Next</span><i class=/"fa fa-circle fa-stack-2x/"></i><i class=/"fa fa-chevron-right fa-stack-1x fa-inverse/" aria-hidden=/"true/"></i></span>"]
})
Cargas de escapar allí, use comillas simples en su lugar si se prefiere.
Y en el SCSS solo comente el :: before attrs:
.owl-prev {
//&::before { content: "/f104"; }
}
.owl-next {
//&::before { content: "/f105"; }
}
mi solución es
navigationText: ["", ""]
El código completo está abajo:
var owl1 = $("#main-demo");
owl1.owlCarousel({
navigation: true, // Show next and prev buttons
slideSpeed: 300,
pagination:false,
singleItem: true, transitionStyle: "fade",
navigationText: ["", ""]
});// Custom Navigation Events
owl1.trigger(''owl.play'', 4500);