Kích thước cố định của Flexslider

Question

Tôi đang sử dụng Flexslider để kéo hình ảnh sản phẩm có kích thước khác nhau từ API. Tôi đã ném chúng vào <ul> của Flexslider, nhưng các kích thước hình ảnh khác nhau này không phát huy tốt. Flexslider hoạt hình độc đáo khi hình ảnh có độ cao khác nhau, nhưng tôi muốn có Flexslider có chiều cao và chiều rộng cố định để vừa với bố cục của tôi. Tôi đã thử đặt toàn bộ điều vào một kích thước cố định <div>, nhưng Flexslider bỏ qua nó hoàn toàn và tràn vào phần còn lại của bố trí. Có cách nào để thay đổi kích thước hình ảnh để phù hợp để Flexslider không thay đổi kích cỡ?

Answer 1

Giả sử bạn muốn có kích thước cố định 200px x 200px. Thêm các thuộc tính này vào các bộ chọn sau trong tệp flexslider.css và bạn nên làm tốt:

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

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

Hy vọng điều này sẽ hữu ích!

Answer 2

Đặt kích thước với các tùy chọn phong cách của div cụ thể như dưới đây, với có hai thanh trượt với kích thước khác nhau:

<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

Yếu tố với lớp ".flex-viewport" là container của các slide , yếu tố đó thích ứng với chiều cao của anh ấy với hình ảnh cao hơn trong tập hợp, mẹo được đặt tất cả chiều cao của ảnh thành 0 ngoại trừ ảnh có trong bản chiếu hiện tại nằm bên trong phần tử li với lớp ".flex-active-slide" flexslider script chuyển đổi khi slide vị trí trao đổi, điều xấu duy nhất về thủ thuật này là chuyển đổi của lớp xảy ra sau khi slide mới được đặt ở vị trí mới sau đó một stutter xảy ra, nhưng bạn có thể đối phó với điều đó bằng cách sử dụng một số ràng buộc javascript một số toggleClass vào cùng một sự kiện kích hoạt thay đổi trang trình bày, giúp hữu ích.

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

height: 0 !important; 
} 

Answer 4

Di

smoothHeight: true, 

từ

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

Thay đổi chiều rộng thông qua kịch bản nói chiều rộng của bạn sẽ được 400

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