javascript - bootstrap - slider banner

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

Question

Ayer prensé un sitio web a un cliente. Siempre uso el carrusel de Owl ya que es sensible. El cliente como nunca odió las siguientes palabras anteriores y quiso cambiarlas a flechas.

Así que por lo tanto he actualizado mi guión. js archivo. Fue muy fácil de hacer y quería compartirlo.

$(document).ready(function(){
$(''.owl-carousel'').owlCarousel({
    nav:true,
    responsive:{
     ...
 })
 $( ".owl-prev").html(''<i class="fa fa-chevron-left"></i>'');
 $( ".owl-next").html(''<i class="fa fa-chevron-right"></i>'');
}); 

Bien ahí lo tienes. Siempre se puede agregar más estilo. (La primera vez que utilizo una respuesta a su propia pregunta, espero que este sea el lugar / camino correcto)

Answer 1

Así es como lo hace en su función $(document).ready() con los iconos de FontAwesome:

 $( ".owl-prev").html(''<i class="fa fa-chevron-left"></i>'');
 $( ".owl-next").html(''<i class="fa fa-chevron-right"></i>'');

Answer 2

El siguiente código funciona para mí en el carrusel de búhos .

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>"]
});

Answer 3

Si está utilizando Owl Carousel 2 , debería usar lo siguiente:

$(".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>"]
   });

Answer 4

Si está utilizando la última versión de Owl Carousel 2. Puede reemplazar el texto de navegación por el icono de fuente impresionante. El código está abajo.

$(''.your-class'').owlCarousel({
        loop: true,
        items: 1, // Select Item Number
        autoplay:true,
        dots: false,
        nav: true,
        navText: ["<i class=''fa fa-long-arrow-left''></i>","<i class=''fa fa-long-arrow-right''></i>"],

    });

Answer 5

Una nota para otros que pueden 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: [
   "<i class=''fa fa-chevron-left''></i>",
   "<i class=''fa fa-chevron-right''></i>"
]

Answer 6

Completa el tutorial here

link demo

JavaScript

$(''.owl-carousel'').owlCarousel({
    margin: 10,
    nav: true,
    navText:["<div class=''nav-btn prev-slide''></div>","<div class=''nav-btn next-slide''></div>"],
    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;
}