Problem szerokości suwaka Flexslider

Question

Mam dziwny problem przy użyciu flexslider. Przesunięcie LI nie ma poprawnej szerokości, tak, że pokazane są wszystkie slajdy. Dzieje się tak tylko przy ładowaniu pierwszej strony. Jak tylko przełączę się na inną kartę i przełączam z powrotem, wszystko wygląda dobrze. Może problem z ładowaniem JS ?!

Zrzut ekranu: 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 
    }); 
}); 

Próbowałem go z $ (document) .ready (function() też, ale wciąż ten sam problem:

Jakieś pomysły?

Answer 1

Ten kod/zamówienie poniżej może pomóc; przynajmniej przynajmniej odniosłem sukces.

<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

Miałem ten sam problem.

Przy pierwszym załadowaniu w sesji Flexslider otrzymuje szerokość kontenera suwaka, który, jeśli nie jest wyraźny, ma wartość 0px. Następnie slajdy mają szerokość 0 pikseli i nie można ich zobaczyć.

Aby uniknąć tego problemu, wystarczy ustalić szerokość w kontenerze suwak, w moim przypadku 604px:

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

Answer 3

Cóż, Werner.

Skończyłem z twoim rozwiązaniem. Niestety.

Jest to inny sposób na zrobienie tego.

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

Powodem Wybrałem się nie używać powyższy kod jest to, że nie było opóźnienie i zrobiłem mały skok kiedy slajdy zaktualizowany do właściwej szerokości.

Jeśli ktoś ma czystsze rozwiązanie - proszę mi powiedzieć. Używam najnowszego flexslidera - i ten problem zdarza się tylko czasami. Ale kiedy to nastąpi ... arghhh.

Answer 4

Rozwiązałem ten problem, usuwając minItems w moim wywołaniu flexslider. Wydaje się jednak działać z maxItems.

Answer 5

Dowiedziałem się, dlaczego to robi, i to jest całkiem proste.

Dzieje się tak ze względu na CSS !!! na ul w suwaku.

zdjąć Uszczelki i marże na ul.slides

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

po zrobiłem to, że zmiana rozmiaru pracował idealnie za każdym razem na wszystkich przeglądarkach i komórkowego.

Answer 6

Dla mnie problemem był znacznik.Miałem to:

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

---

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

... ale wydawało się, że musi być stosowana do wewnętrznej div na każdym slajdzie, co jest śmieszne.

<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

Może to trochę późno na inną odpowiedź, ale po wypróbowaniu wszystkich odpowiedzi tu i na innych forach, skończyło się z moim własnym rozwiązaniem, podobnie jak inni, ale przynajmniej znaleźć to całkiem spójne i czyste.

Miałem problem w środowisku mobilnym, w którym suwak znajduje się w zakładce, która jest otwierana po kliknięciu w tytuł. Treść była w display:none, co powoduje problem z Flexslider (w. 2.5), który nie jest w stanie określić prawidłowej szerokości zawartych slajdów.

Poprawiłem więc moje css i schowałem kontener pod kątem widoczności i krycia.

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 jest straighforward od podstawowego przykład, nic więcej.

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