Comment faire un carrousel hibou avec des flèches au lieu de la prochaine précédente

hier, j'ai prenseted un site web pour un client. J'ai toujours utiliser Owl carousel, car il est sensible. Le client comment jamais détesté le précédent, suivant les mots et je voulais changer de flèches.

Donc j'ai mis à jour mon script . fichier js. Il a été très facile à faire et que je voulais partager.

$(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>');
});

Wel là vous l'avez. Vous pouvez toujours ajouter plus de style. (Première fois que j'utilise une réponse à votre propre question espérons que c'est le lieu/voie)

source d'informationauteur user3806549

  1. 34

    Si vous utilisez Owl Carousel 2alors vous devriez utiliser les éléments suivants:

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

    Une note pour les autres qui peuvent être en utilisant Owl Carousel v 1.3.2:

    Vous pouvez remplacer le texte de navigation dans les paramètres où vous êtes à l'activation de la navigation.

    navigation:true,
navigationText: [
   "<i class='fa fa-chevron-left'></i>",
   "<i class='fa fa-chevron-right'></i>"
]
  3. 3

    C'est comment vous le faites dans votre $(document).ready() fonction avec FontAwesome Icônes:

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

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

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