Naprawiono rozmiar Flexslider

Question

Używam Flexslider do pobierania obrazów produktu o różnych rozmiarach z API. Wrzucałem je do Flexslidera <ul>, ale te różne rozmiary zdjęć nie grają dobrze. Flexslider ładnie animuje, gdy obrazy mają różną wysokość, ale chcę, aby Flexslider miał stałą wysokość i szerokość, aby pasowały do ​​mojego układu. Próbowałem umieścić całość w stałym rozmiarze <div>, ale Flexslider ignoruje go całkowicie i przelewa się do reszty układu. Czy istnieje sposób na zmianę rozmiaru obrazu, aby zmieścił się program Flexslider?

Answer 1

Załóżmy, że chcesz mieć stały rozmiar 200 x 200 pikseli. Dodaj te właściwości do następujących selektorów w pliku flexslider.css i powinno być dobrze iść:

.flexslider { 
    width: 200px; 
    height: 200px; 
} 

.flexslider .slides img { 
    width: 200px; 
    height: 200px; 
} 

Nadzieja to pomaga!

Answer 2

Ustaw rozmiar z opcją stylu konkretnego div jak poniżej, ze nie ma rozsuwany z dwóch różnej wielkości:

<div class="flexcontainer"> 
    <div id="first-slider" class="flexslider" style:"width:100px"> 
     <ul class="slides"> 
     ... 
     </ul> 
    </div> 
    <div id="second-slider" class="flexslider" style:"width:200px"> 
     <ul class="slides"> 
     ... 
     </ul> 
    </div> 
</div> 

Answer 3

Element z klasą „.flex-rzutni” to pojemnik ze slajdami , ten element dostosowuje swoją wysokość do wyższego obrazu w zestawie, lewy ustawia całą wysokość obrazu na 0, z wyjątkiem tej, która znajduje się w bieżącym slajdzie, który jest wewnątrz elementu li z klasą ".flex-active-slide", która Skrypt Flexslider przełącza się, gdy slajdy wymieniają się pozycjami, jedyną złą rzeczą w tej sztuczce jest to, że przełączanie klasy następuje po umieszczeniu nowego slajdu w nowej pozycji, a następnie pojawia się zacinanie, ale można sobie z tym poradzić za pomocą niektórych wiązań javascript niektóre toggleClass do tego samego zdarzenia, które wyzwalają zmianę slajdu, pomóc być pomocne.

.flex-viewport li:not(.flex-active-slide) img{ 

height: 0 !important; 
} 

Answer 4

Usuń

smoothHeight: true, 

z

jQuery('#slider').flexslider({ 
      animation: "slide", 
      controlNav: false, 
      animationLoop: false, 
      prevText: "",   
        nextText: "", 
      slideshow: false, 
        smoothHeight: true, 
        animateHeight: false, 
      sync: "#carousel", 
      start: function(){ 
       jQuery('#slider ul.slides img').show(); 
      }, 
      }); 

Answer 5

Zmień szerokość poprzez skrypt powiedzieć swoją szerokość być 400

$('.flex_up').flexslider({ 
    animation: "slide", 
    animationLoop: false, 
    itemWidth: 400, 
    itemMargin: 5, 
});