web-dev-qa-db-fra.com

Les flèches de Flexslider ne s'affichent pas correctement

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:

enter image description here

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?

jquerycsspluginsnavigation
20
thosetinydreams

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
22
Stuart Kershaw

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.

26
And390

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.

0
JWPersh

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

0
Mr Digital

Il suffit d'ajouter 

.flex-direction-nav li a{
      height:50px; 
}

Cela remplace le css par défaut

0
Chris Happy

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.

0
Tauphik Ahamad