it-swarm.com.de

Flexslider-Pfeile werden nicht richtig angezeigt

Ich bin seit einiger Zeit mit diesem Problem beschäftigt und kann anscheinend keine Antwort finden, also entschied ich mich, direkt zu fragen.

Ich verwende das Flexslider-Plug-In, um mehrere Bilder auf einer Site anzuzeigen. Die Pfeile-Navigation, die angezeigt wird, wenn der Mauszeiger auf das Bild zeigt, ist deaktiviert. Der Pfeil ist oben abgeschnitten, und der darunterliegende Text, der vollständig ausgeblendet sein soll, wird teilweise angezeigt. Hier ist ein Screenshot des Problems:

enter image description here

Ich habe versucht, mit CSS zu basteln, aber ich kann es einfach nicht verstehen. Könnte mir bitte jemand helfen?

20
thosetinydreams

overflow: hidden; von .flex-direction-nav a entfernen:

.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; 
}

Wenn Sie den Text ändern oder entfernen müssen, der standardmäßig für "Zurück" und "Weiter" angezeigt wird, lesen Sie die Optionsdokumentation "An Ihre Bedürfnisse anpassen" für das Plugin hier: http://www.woothemes.com/ flexslider/

Danach aktualisieren Sie einfach die Einstellungen für:

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

Sie können auch line-height hinzufügen, um das Problem zu lösen:

.flex-direction-nav a  {
    line-height: 40px;
}

PS: Es scheint wie ein Flexslider-Fehler, dass er mit den Standardeinstellungen nicht richtig funktioniert.

26
And390

Ich habe es geschafft, es durch die Änderung der Schriftgröße von "flexslider-icon" im flexslider-CSS (um die Linie 70 in flexslider.css) zu ändern. 

Anscheinend ist die Einstellung standardmäßig auf 40px gesetzt, aber die Änderung auf 30px hat auf zwei Websites, die ich baue, einwandfrei funktioniert.

0
JWPersh

Der Pfeil, bei dem es sich um eine Schriftart handelt, ist für den Container zu groß.

Fügen Sie einfach dieses CSS hinzu, es reduziert die Schriftgröße und behebt das Problem mit dem Abschneiden.

.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);
}

Wenn Sie dies in Ihr CSS einfügen, werden die Standardeinstellungen für den Flexslider überschrieben

0
Mr Digital

Einfach hinzufügen 

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

Dies überschreibt die Standard-CSS

0
Chris Happy

Öffnen Sie Ihre Datei "jquery.flexslider.js" und suchen Sie "// Primary Controls" in Zeile 1125 (ungefähr). Sie würden finden,

// Primary Controls
controlNav: true,
directionNav: true,
prevText: "Previous",
nextText: "Next", 

Hier müssen Sie den nächsten und den vorherigen Text entfernen und erneut speichern.

Hoffe das wird helfen.

0
Tauphik Ahamad