Carrusel de búho, haciendo una navegación personalizada
Así que tengo un Carrusel de Búho 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 una manera de hacer que cambien entre imágenes de mi Carrusel de Búho. Busqué sin parar y no puedo encontrar la solución. Alguna idea?
7 answers
Necesita habilitar la navegación y editar navigationText:
> Suponiendo que esto es version 1.3.2
owlgraphic.com/owlcarousel/#customizing
Nota : Parece que el sitio para Owl 1.3 está ahora abajo, así que aquí hay un ejemplo de Codepen bifurcado.
$("#owl-example").owlCarousel({
navigation: true,
navigationText: ["<img src='myprevimage.png'>","<img src='mynextimage.png'>"]
});
> Asumiendo que es 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 Búho
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2018-03-14 23:23:04
Lo hice con css, es decir: agregar clases para flechas, pero también puedes usar imágenes.
A continuación se muestra 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 imágenes:
.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:)
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2016-08-26 16:10:02
Crear su navegación personalizada y darles las clases que desee, entonces usted está listo para Ve. 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')]
});
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-07-22 10:05:38
En owl carousel 2 puedes usar iconos font-awesome 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>"]
});
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-01-05 13:21:39
El siguiente código funciona para mí en 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>"]
});
For 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>"]
});
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-02-18 09:25:50
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);
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2016-12-29 10:58:42
Puede usar una combinación JS y SCSS/Fontawesome para los botones Prev/Next.
En tu JS (esto incluye solo el lector de pantalla / clases de accesibilidad con Zurb Foundation):
$('.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 embed en el encabezado del documento:
<script src="//use.fontawesome.com/123456whatever.js"></script>
Hay varias maneras de incluir FA, strokes / folks, pero me parece que esto es bastante rápido y como estoy usando webpack puedo casi vivir con esa 1 llamada extra al servidor js.
Y para actualizar esto - también hay esta opción JS para flechas un poco más complejas, aún con la 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>"]
})
Un montón de escapes allí, use comillas simples en su lugar si lo prefiere.
Y en el SCSS solo comente el:: before attrs:
.owl-prev {
//&::before { content: "\f104"; }
}
.owl-next {
//&::before { content: "\f105"; }
}
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-10-01 18:14:05