Flexslider的固定大小

我使用Flexslider從API中提取不同大小的產品圖像。我一直在將它們投入Flexslider的<ul>，但這些不同的圖像尺寸不能很好地發揮。當圖像具有不同的高度時，Flexslider可以很好地生成動畫，但我希望Flexslider具有固定的高度和寬度以適合我的佈局。我試圖把整個東西放到一個固定大小的<div>中，但是Flexslider完全忽略它，並溢出到佈局的其餘部分。有沒有辦法調整圖像大小以適應Flexslider的大小？Flexslider的固定大小

來源

2012-11-02 Shawn Walton

你有沒有嘗試添加溢出：隱藏到div你添加了嗎？ – coopersita

比方說，您通過200像素想要的200像素的固定尺寸。在flexslider.css文件中的這些屬性添加到下面的選擇，你應該是好去：

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

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

希望這有助於！

來源

2012-11-02 21:51:25

這似乎工作得很好，但非方形圖像可能會變形。有沒有辦法調整圖像的大小以自動適應該方塊而不失真？ –

您指定了需要固定的高度和寬度，以便Flexslider不會調整大小。爲了適應不同比例的圖像，Flexslider必須改變其尺寸以適應新的圖像。我給你的代碼可以更改爲固定大小以適應你的佈局（例如：960 x 540），但它依賴於每個圖像具有相同的固定大小。有沒有一種方法可以在照片編輯器中重新裁剪和調整圖像大小以解決此問題？ –

我從API中抽取這些各種圖像，所以我無法用Photoshop或其他類似的方法調整它們的大小。對不起，我不清楚：/ –

與如下，以在兩個滑塊與不同尺寸的具體div的樣式選項設置尺寸：

<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>

來源

2013-03-24 23:26:59

動態高度怎麼樣？ – mbb

如果每張幻燈片都有自己的ID，那麼最好不要使用內聯CSS。 – cfx

與類「.flex視口」元素是幻燈片的容器，那個元素將他的高度調整到集合中較高的圖像上，技巧是將所有圖像高度設置爲0，除了當前幻燈片中的那個元素在類別「.flex-active-slide」中的li元素內。當幻燈片交換位置時，flexslider腳本會切換，關於這個技巧唯一不好的地方是該類的切換髮生在新幻燈片放入新位置後出現一個口吃，但是您可以通過使用一些JavaScript綁定來處理一些toggleClass對觸發幻燈片更改的相同事件有幫助。

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

height: 0 !important; 
}

來源

2014-04-12 05:07:35 Lu32

不確定這個版本與哪個版本相關，但是當前的版本我沒有看到flex-viewport類，所以只需將其添加到您的lis的封裝器即可。我的幻燈片（默認），但可以在配置中覆蓋它。 – Evan

刪除

smoothHeight: true,

從

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(); 
      }, 
      });

來源

2016-07-29 17:04:28

更改通過腳本寬度說出你的寬度爲400

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

來源

2017-04-11 05:40:11

Flexslider的固定大小

回答

相關問題