Cómo hacer un carrusel de búhos con flechas en lugar del siguiente anterior

Posterior a investigar en diferentes repositorios y foros de internet al terminar hemos dado con la respuesta que te mostramos ahora.

Solución:

si estás usando Owl Carousel 2entonces debes usar lo siguiente:

$(".category-wrapper").owlCarousel(
     items : 4,
     loop  : true,
     margin : 30,
     nav    : true,
     smartSpeed :900,
     navText : ["",""]
   );

Una nota para otros que puedan estar usando Owl Carousel v 1.3.2:

Puede reemplazar el texto de navegación en la configuración donde está habilitando la navegación.

navigation:true,
navigationText: [
   "",
   ""
]

Tutorial completoaquí

ManifestaciónEnlace

JavaScript

$('.owl-carousel').owlCarousel(
    margin: 10,
    nav: true,
    navText:["
","
"],
    responsive: 
        0: 
            items: 1
        ,
        600: 
            items: 3
        ,
        1000: 
            items: 5
        
    
);

Estilo CSS para la navegación

.owl-carousel .nav-btn
  height: 47px;
  position: absolute;
  width: 26px;
  cursor: pointer;
  top: 100px !important;


.owl-carousel .owl-prev.disabled,
.owl-carousel .owl-next.disabled
pointer-events: none;
opacity: 0.2;


.owl-carousel .prev-slide
  background: url(nav-icon.png) no-repeat scroll 0 0;
  left: -33px;

.owl-carousel .next-slide
  background: url(nav-icon.png) no-repeat scroll -24px 0px;
  right: -33px;

.owl-carousel .prev-slide:hover
 background-position: 0px -53px;

.owl-carousel .next-slide:hover
background-position: -24px -53px;
   

Valoraciones y reseñas

Si te sientes a gusto, tienes el poder dejar una división acerca de qué te ha parecido este ensayo.

---

---

Utiliza Nuestro Buscador