Owl Carousel, rendant la navigation personnalisée
J'ai donc une Chouette Carrousel qui contient trois images. J'ai également ajouté une navigation personnalisée (flèches.les images png) sur les côtés gauche et droit. Cependant, ces flèches sont actuellement inutile, car je ne peux pas trouver un moyen de les faire basculer entre les images de mon Owl Carousel. J'ai cherché sans cesse et ne peut pas trouver la solution. Des idées?
- Vous pouvez essayer cette approche: stackoverflow.com/a/24525446/2000051
- Cochez cette exemple tut pour montrer Suivant Précédent sur les côtés de owl carousel 2 freakyjolly.com/...
Vous devez vous connecter pour publier un commentaire.
Vous devez activer la navigation et de modifier navigationText:
> en Supposant que c'est
version 1.3.2
owlgraphic.com/owlcarousel/#customizingNote: Il semble que le site de la Chouette 1.3 est maintenant en baisse, de sorte voici une fourche Codepen exemple.
> en Supposant que c'est
version 2
:https://owlcarousel2.github.io/OwlCarousel2/docs/api-options.html#nav
Personnels suggestion: Utiliser Slick plus Chouette
Personnels suggestion de mise à jour: Minuscule curseur est trop grand.
Je l'ai fait avec le css, c'est à dire: l'ajout de classes pour les flèches, mais vous pouvez utiliser aussi bien les images.
Soufflet est un exemple avec fontAwesome:
JS:
CSS
À l'aide d'images:
Peut-être que quelqu'un va trouver cela utile 🙂
Créer votre navigation personnalisée et de leur donner les classes que vous voulez, alors vous êtes prêt à
aller. c'est aussi simple que cela.
Voyons un exemple:
HTML:
Dans votre fichier js vous pouvez effectuer les opérations suivantes:
JS:
HTML:
Si vous souhaitez utiliser vos propres éléments de navigation,
Pour Owl Carousel 1
Pour Owl Carousel 2
En owl carousel 2 vous pouvez utiliser font-awesome icônes ou toutes les images personnalisées dans navText option de ce genre:
Le code suivant fonctionne pour moi sur owl carousel .
https://github.com/OwlFonk/OwlCarousel
Pour OwlCarousel2
https://owlcarousel2.github.io/OwlCarousel2/docs/api-options.html
ma solution est
navigationText: ["", ""]
code complet est ci-dessous:
Vous pouvez utiliser un JS et SCSS/Fontawesome combinaison pour les Prev/Next boutons.
Dans votre JS (ce qui inclut screenreader seulement/accessibilité classes avec Zurb Foundation):
Dans votre SCSS ce:
Pour la FontAwesome font-family il m'arrive d'utiliser le code embed dans l'en-tête du document:
Il existe divers moyens pour inclure les FA, les accidents vasculaires cérébraux/gens, mais je trouve que c'est assez rapide et que je suis en utilisant webpack je peux juste au sujet de vivre avec 1 extra js d'appel de serveur.
Et de mettre à jour cette - il y a aussi ce JS option pour un peu plus complexe flèches, toujours dans un souci d'accessibilité:
Charges d'échapper il y, utilisez des guillemets simples si l'on préfère.
Et dans le SCSS juste un commentaire la ::avant attrs:
Tutoriel complet ici
Démo lien
JavaScript
De Style CSS pour la navigation