Je l'ai fait avec css, c'est à dire: ajouter des classes pour les flèches, mais vous pouvez aussi utiliser des images.

Bellow est un exemple avec 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;
}

utilisation des images:

.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;
}

Peut-être que quelqu'un va trouver cela utile :)

créer votre navigation personnalisée et leur donner les classes que vous voulez, alors vous êtes prêt à aller. c'est aussi simple que ça.

voyons un exemple:

<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>

dans votre fichier js vous pouvez faire ce qui suit:

 $(".owl-carousel").owlCarousel({
    // you can use jQuery selector
    navText: [$('.am-next'),$('.am-prev')]
 
});

dans owl carousel 2 Vous pouvez utiliser les icônes font-awesome ou n'importe quelles images personnalisées dans l'option navText comme ceci:

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

Le code suivant fonctionne pour moi sur owl carousel .

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

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

ma solution est

navigationText: ["", ""]

le code complet est ci-dessous:

    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);

vous pouvez utiliser une combinaison JS et SCSS/Fontawesome pour les boutons Prev/Next.

Dans votre JS (ceci inclut le lecteur d'écran/l'accessibilité des classes avec Zurb Foundation):

$('.whatever-carousel').owlCarousel({
    ... ...
    navText: ["<span class='show-for-sr'>Previous</span>","<span class='show-for-sr'>Next</span>"]
    ... ...
})

Dans votre SCSS ceci:

.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";
            }
        }
    }
}

Pour les FontAwesome font-family il m'arrive d'utiliser le code embed dans l'en-tête du document:

<script src="//use.fontawesome.com/123456whatever.js"></script>

il y a plusieurs façons d'inclure FA, strokes/gens, mais je trouve que c'est assez rapide et que j'utilise webpack je peux vivre avec 1 extra js d'appel de serveur.

Et de mettre à jour cette - il y a aussi cette option JS pour les flèches un peu plus complexes, toujours en pensant à l'accessibilité:

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

charges d'échapper là, utilisez des guillemets simples à la place si vous préférez.

Et dans le SCSS juste un commentaire ::avant attrs:

.owl-prev {
        //&::before { content: "\f104"; }
    }
    .owl-next {
        //&::before { content: "\f105"; }
    }