flexslider響應傳送帶問題

我需要使用flexslider創建響應傳送帶。問題在於我將瀏覽器窗口縮小到容器大小以下，項目位置會變得混亂。flexslider響應傳送帶問題

這是滑塊的> 1200屏幕上的屏幕截圖（精） enter image description here

這是滑塊對> 800的屏幕（!!） enter image description here

我JS初始化的屏幕截圖：

$('.flexslider').flexslider({ 
    animation: "slide", 
    animationLoop: true, 
    touch: true, 
    mousewheel: true, 
    itemWidth: 400,   
    prevText: "", 
    nextText: "" 
    });

正如您在圖像（2）中看到的，第三張圖像被切掉。當分辨率達到閾值時，我想要將可見元素的數量減少到兩個，並且使圖像適應可用空間，因此沒有任何東西被切掉。想法？

來源

2014-01-31 Evaldas Raisutis

難道你不能只使用CSS並將img寬度設置爲33％？ – Phil

嗨@phil，它似乎重置滑動的寬度。此外，包含所有項目的父div的寬度爲1000％，所以它不會有幫助。 –

我得到了你。只是看了Flexslider規格。那內置的itemWidth選項呢？你可以將其改爲基於百分比的價值嗎？ – Phil

晚了一些，但看起來這可能會解決你的問題：

http://flexslider.woothemes.com/dynamic-carousel-min-max.html

的MIN-和最大的項目設置動態設置的基礎上，窗寬...

有點亂，但它確實有效，所以沒有圖像被切碎。

來源

2015-02-10 09:59:47 tomcat

這是因爲你的flexslider上的itemWidth。您應該編寫mediaquery以使各個設備的寬度更加靈活。在此之前添加這個額外的腳本並嘗試。

// tiny helper function to add breakpoints 
var getGridSize = function() { 
    return (window.innerWidth < 600) ? 1 : 
     (window.innerWidth < 900) ? 2 : 3; 
} 

$('.flexslider').flexslider({ 
    animation: "slide", 
    animationLoop: false, 
    itemWidth: 200, 
    itemMargin: 40, 
    minItems: getGridSize(), // use function to pull in initial value 
    maxItems: getGridSize(), // use function to pull in initial value 
    directionNav: true, 
    controlNav: false, 
    slideshow: false, 
});

來源

2016-11-01 07:17:20 nanbatman

flexslider響應傳送帶問題

回答

相關問題