J'ai donc un carrousel de hibou qui contient trois images. J'ai également ajouté des flèches de navigation personnalisées (images .png) à gauche et à droite. Cependant, ces flèches sont actuellement inutiles, car je ne trouve pas le moyen de les faire basculer entre les images de mon carrousel de la chouette. J'ai cherché sans cesse et ne trouve pas la solution. Des idées?
Vous devez activer la navigation et éditer navigationText:
version 1.3.2
owlgraphic.com/owlcarousel/#customizing
Note: Il semble que le site de Owl 1.3 soit maintenant en panne, donc voici un exemple codepen en forme de fourche .
$("#owl-example").owlCarousel({
navigation: true,
navigationText: ["<img src='myprevimage.png'>","<img src='mynextimage.png'>"]
});
version 2
:https://owlcarousel2.github.io/OwlCarousel2/docs/api-options.html#nav
$("#owl-example").owlCarousel({
nav: true,
navText: ["<img src='myprevimage.png'>","<img src='mynextimage.png'>"]
});
Suggestion personnelle: Utilisez Slick over Owl
Je l’ai fait avec css, c’est-à-dire en ajoutant des classes pour les flèches, mais vous pouvez aussi utiliser des images.
Ci-dessous, 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 d'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 trouvera cela utile :)
Créez votre navigation personnalisée et donnez-leur les classes que vous souhaitez, vous êtes alors prêt à partir. c'est simple comme ç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 effectuer les opérations suivantes:
$(".owl-carousel").owlCarousel({
// you can use jQuery selector
navText: [$('.am-next'),$('.am-prev')]
});
Dans hibou carrousel 2, vous pouvez utiliser des icônes font-awesome ou n’importe quelle image personnalisée dans 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>"]
});
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>"]
});
ma solution est
navigationText: ["", ""]
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);
Didacticiel completici
Démolink
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
}
}
});
Style CSS pour la navigation
.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;
}
Vous pouvez utiliser une combinaison JS et SCSS/Fontawesome pour les boutons Précédent/Suivant.
Dans votre JS (cela inclut uniquement les classes de lecteur d’écran/d’accessibilité 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 la famille de polices FontAwesome, il m'est arrivé d'utiliser le code incorporé dans l'en-tête du document:
<script src="//use.fontawesome.com/123456whatever.js"></script>
Il existe différentes manières d'inclure FA, les traits/personnes, mais je trouve que c'est assez rapide et que j'utilise Webpack, je peux à peu près vivre avec cet appel supplémentaire sur le serveur js.
Et pour mettre à jour ceci - il y a aussi cette option JS pour des flèches légèrement plus complexes, toujours dans un souci d'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>"]
})
Les charges de s'échapper là-bas, utilisez des guillemets simples à la place si vous le préférez.
Et dans le SCSS, commentez les :: avant attrs:
.owl-prev {
//&::before { content: "\f104"; }
}
.owl-next {
//&::before { content: "\f105"; }
}
var owl = $('.owl-carousel');
owl.owlCarousel();
// Go to the next item
$('.customNextBtn').click(function() {
owl.trigger('owl.prev');
})
// Go to the previous item
$('.customPrevBtn').click(function() {
owl.trigger('owl.next');
})
var owl = $('.owl-carousel');
owl.owlCarousel();
// Go to the next item
$('.customNextBtn').click(function() {
owl.trigger('next.owl.carousel');
})
// Go to the previous item
$('.customPrevBtn').click(function() {
// With optional speed parameter
// Parameters has to be in square bracket '[]'
owl.trigger('prev.owl.carousel', [300]);
})