Comment faire un hibou carrousel avec des flèches au lieu de précédente
hier j'ai vendu un site web à un client. J'utilise toujours Owl carousel car il est réactif. Le client n'a jamais détesté les précédents, les prochains mots et a voulu les changer en flèches.
Donc j'ai mis à jour mon script . fichier js. C'était très facile à faire et je voulais le 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)
4 réponses
Si vous utilisez Owl Carousel 2, alors vous devez utiliser la syntaxe suivante:
$(".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>"]
});
Une remarque 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 activez la navigation.
navigation:true,
navigationText: [
"<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>"]
});
C'est comme ça que tu le fais dans ton $(document).ready() function avec FontAwesome Icônes:
$( ".owl-prev").html('<i class="fa fa-chevron-left"></i>');
$( ".owl-next").html('<i class="fa fa-chevron-right"></i>');