Je suis coincé dans ce problème depuis un certain temps et je n'arrive pas à trouver de réponse. J'ai donc décidé de demander directement.
J'utilise le plugin Flexslider pour afficher plusieurs images sur un site. Toutefois, la navigation par flèches qui s'affiche lorsque le survol de l'image est désactivé. La flèche est coupée en haut et le texte en dessous qui est censé être complètement caché est partiellement visible. Voici une capture d'écran du problème:
J'ai essayé de bricoler avec le CSS, mais je n'arrive pas à le comprendre. Quelqu'un pourrait-il m'aider s'il vous plaît?
Supprimer overflow: hidden;
de .flex-direction-nav a
:
.flex-direction-nav a {
display: block;
width: 40px;
height: 40px;
margin: -20px 0 0;
position: absolute;
top: 50%; z-index: 10;
overflow: hidden; /* Remove this line */
opacity: 0;
cursor: pointer;
color: rgba(0,0,0,0.8);
text-shadow: 1px 1px 0 rgba(255,255,255,0.3);
-webkit-transition: all .3s ease;
-moz-transition: all .3s ease;
transition: all .3s ease;
}
Si vous devez modifier ou supprimer le texte affiché par défaut pour "Précédent" et "Suivant", consultez la documentation sur les options "Adaptez-vous à vos besoins" pour le plugin ici: http://www.woothemes.com/ flexslider/
Ensuite, il suffit de mettre à jour les paramètres pour:
prevText: "Previous", //String: Set the text for the "previous" directionNav item
nextText: "Next", //String: Set the text for the "next" directionNav item
Vous pouvez également ajouter line-height
pour le résoudre:
.flex-direction-nav a {
line-height: 40px;
}
PS: Cela ressemble à un bug de Flexslider, cela ne fonctionne pas correctement avec les paramètres par défaut.
J'ai réussi à le faire fonctionner en modifiant la taille de la police de "flexslider-icon" dans le CSS de flexslider (autour de la ligne 70 dans flexslider.css).
Il semble être réglé à 40px par défaut, mais le changer à 30px a parfaitement fonctionné sur deux sites Web que je construis.
La flèche, qui est une police, est trop grande pour son conteneur.
Ajoutez simplement ce CSS, cela réduira la taille de la police et, à son tour, résoudra le problème des coupures.
.flex-direction-nav a:before {
font-family: "flexslider-icon";
font-size: 35px;
display: inline-block;
content: '\F001';
color: rgba(0, 0, 0, 0.8);
text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.3);
}
Ajoutez ceci dans votre CSS et cela remplacera les paramètres par défaut de flexslider
Il suffit d'ajouter
.flex-direction-nav li a{
height:50px;
}
Cela remplace le css par défaut
Ouvrez votre fichier "jquery.flexslider.js" et cherchez "// Primary Controls"
à la ligne 1125 (environ). Vous trouveriez,
// Primary Controls
controlNav: true,
directionNav: true,
prevText: "Previous",
nextText: "Next",
Ici, vous devez supprimer le texte suivant et le texte précédent, puis les enregistrer à nouveau.
J'espère que cela aidera.