Flexslider Slide Width Ausgabe

Question

Ich habe ein seltsames Problem mit flexslider. Die Slide LIs erhalten nicht die richtige Breite, so dass alle Slides angezeigt werden. Dies tritt nur beim Laden der ersten Seite auf. Sobald ich auf eine andere Registerkarte umschalte und alles zurückschalte, sieht alles gut aus. Vielleicht ein JS Loading Problem ?!

Screenshot: here

flexslider.css

.flexslider {margin: 0; padding: 0;} 
.flexslider .slides > li {text-align: center; display: none; -webkit-backface-visibility: hidden;} /* Hide the slides before the JS is loaded. Avoids image jumping */ 
.flexslider .slides li.flex-active-slide img {text-align:center; width: auto; -webkit-border-radius: 6px; -moz-border-radius: 6px; -o-border-radius: 6px; border-radius: 6px; box-shadow: 0 1px 4px rgba(0,0,0,.2); -webkit-box-shadow: 0 1px 4px rgba(0,0,0,.2); -moz-box-shadow: 0 1px 4px rgba(0,0,0,.2); -o-box-shadow: 0 1px 4px rgba(0,0,0,.2); } 

JS

$(window).load(function() { 
    $('.flexslider').flexslider({ 
     controlNav: true, 
     directionNav: true 
    }); 
}); 

Ich habe es versucht, mit $ (document) .ready (function() auch, aber nach wie vor die dasselbe Problem

Irgendwelche Ideen?

Answer 1

Dieser Code/Bestellung kann helfen; zumindest habe ich Erfolg damit gehabt.

<script src="js/jquery-1.8.3.min.js"></script> 
<script src="js/jquery.easing.js"></script> 
<script defer src="js/jquery.flexslider-min.js"></script> 
<script> 
$(document).ready(function(){ 
    $('.flexslider').flexslider({ 
     controlNav: true, 
     directionNav: true, 
    }); 
}); 
</script> 

Answer 2

Ich hatte das gleiche Problem.

Beim ersten Laden in einer Sitzung erhält Flexslider die Breite des Slider-Containers, der, wenn er nicht explizit ist, den Wert 0px hat. Dann Folien haben Breite 0px und Sie können sie nicht sehen.

Um dieses Problem zu vermeiden, ist ausreichend, um eine Breite im Schieber Behälter zu fixieren, in meinem Fall 604px:

<div class="flexslider" style="width: 604px"> 
    <ul class="slides"> 
     <li> 
      <img id="slide1" /> 
     </li> 
     <li> 
      <img id="slide2" /> 
     </li> 
    </ul> 
</div> 

Answer 3

Nun, Werner.

Ich endete mit Ihrer Lösung. Unglücklicherweise.

Dies ist sonst eine andere Möglichkeit, es zu tun.

/* SLIDERS in content */ 
$('.flexslider').flexslider({ 
    animation: "slide", 
    start: function(slider){ 
     $('.flexslider').resize(); 
    } 
}); 

Der Grund, warum ich den obigen Code nicht zu verwenden gewählt ist, dass es eine Verzögerung und machte einen kleinen Sprung war, als die Folien auf die richtige Breite aktualisiert.

Wenn jemand eine sauberere Lösung hat - bitte sagen Sie mir. Ich benutze den neuesten Flexslider - und dieses Problem scheint nur manchmal aufzutreten. Aber wenn es ... arghhh tut.

Answer 4

Ich löste dieses Problem durch Entfernen von minItems in meinem Flexslider-Aufruf. Scheint mit maxItems obwohl zu arbeiten.

Answer 5

Ich fand heraus, warum es so war, und es ist ziemlich einfach.

Es ist wegen CSS !!! auf der ul im Schieberegler.

nehmen die Polsterungen und die Margen auf den ul.slides

.slides{ 
    padding:0; 
    margin:0; 
} 

, nachdem ich tat dies das Ändern der Größe perfekt funktionierte jedes Mal auf allen Browsern und mobilen ab.

Answer 6

Für mich war das Problem das Markup.Ich hatte dies:

<div class='carousel-slides'> 
    <div class='carousel-slide'></div> 
    <div class='carousel-slide'></div> 
</div> 

---

$('.carousel-slides', context).flexslider({ 
    selector: '.carousel-slide' 
}); 

... aber es schien, dass es auf jeder Folie auf eine innere div aufgebracht werden musste, was lächerlich ist.

<div class='carousel-slides'> 
    <div class='carousel-slide'> 
    <div class='carousel-slide-inner'></div> 
    </div> 
    <div class='carousel-slide'> 
    <div class='carousel-slide-inner'></div> 
    </div> 
</div> 

---

$('.carousel-slides', context).flexslider({ 
    selector: '.carousel-slide > .carousel-slide-inner' 
}); 

Answer 7

Vielleicht ist es ein bisschen spät für eine andere Antwort, aber nachdem alle Antworten versuchen, hier und in anderen Foren, ich am Ende mit meiner eigenen Lösung auf, ähnlich wie andere, aber zumindest habe ich finde es ziemlich kohärent und sauber.

Ich hatte das Problem in der mobilen Umgebung, wo der Schieberegler in einer Registerkarte ist, die geöffnet wird, sobald man auf den Titel klickt. Der Inhalt war in display:none, und dies verursacht das Problem an Flexslider (v. 2.5), das die richtige Breite der enthaltenen Folien nicht bestimmen kann.

Also habe ich meine CSS korrigiert und den Container durch Sichtbarkeit mit Sichtbarkeit und Opazität verdeckt.

Html sampl

<dd class="tab-container with-slider"> 
    <div class="flexslider"> 
     <ul class="slides"> 
      <li>whatever </li> 
     </ul> 
    </div> 
</dd> 

Css:

/*all other containers behave well with display none/block so I leave them with normal behavior*/ 
.parent dd.tab-container { 
     display: none; position: relative; 
} 
/*container with flexslider inside uses visibility and opacity to be hidden*/ 
.parent dd.tab-container.with-slider{ 
    display: block; 
    height: 0px; 
    visibility: hidden; 
    opacity: 0; 
} 
.parent.accordion-open dd.tab-container.with-slider{ 
    height: auto; 
    visibility: visible; 
    opacity: 1; 
} 

Js ist straighforward aus dem einfachen Beispiel, nicht mehr.

$j('.myTabOpener').click(function() { 
    var mySlider = $j(this).find('.flexslider'); 
    mySlider.flexslider({ 
     animation: "slide", 
     animationLoop: false, 
     itemWidth: 210, 
     itemMargin: 5, 
     minItems: getGridSize(), 
     maxItems: getGridSize() 
    }); 
});