自動調整流體佈局的尾部滑塊的固定寬度

我一直在研究在流體佈局的網頁中使用尾部滑塊。挑戰在於coda-slider似乎需要一個固定的寬度。嘗試使用百分比會導致副本在面板邊緣消失。自動調整流體佈局的尾部滑塊的固定寬度

我找到了一個樣例javascript，它是根據容器的實際寬度來選擇一個jpg，並嘗試修改它以更改滑塊面板的css寬度值，但沒有成功。 ....好吧我現在工作的寬度。

尾聲滑塊的CSS的控制面板的寬度的部分：

.coda-slider, .coda-slider .panel { width: 650px; }

腳本我發現，改性：

$(document).ready(function() { 

function imageresize() { 
    var availwidth = $("#leftside").width(); 
    var codawidth = availwidth - 50; 
     $(".coda-slider .panel").css({"width": codawidth + "px"}); 
     $(".coda-slider").css({"width":codawidth + "px"}); 
}  

imageresize(); //Triggers when document first loads  

$(window).bind("resize", function(){ //Adjusts image when browser resized 
    imageresize(); 
}); 
});

我得到補救上漿問題，通過使用容器大小，而不是頁面大小...但是... coda-slider使用原始固定寬度作爲滑動距離，所以一旦開始滑動每個面板，就會以每張幻燈片的偏移量結束偏移。

任何建議讓滑動距離隨寬度改變？

行得到它排序....

不得不修改結尾滑塊js文件，替換：

var panelWidth = slider.find(".panel").width();

在相同的公式爲CSS面板寬度：

var panelWidth = $("#leftside").width() - 50;

這照顧了滑動距離。

現在我只需要弄清楚如何在調整瀏覽器窗口時重置coda-slider。它調整了CSS窗口的大小，但不重置幻燈片值。從長遠來看，調整瀏覽器窗口的大小並不是一個很大的要求，但它可以方便人們在瀏覽網站時改變他們平板電腦的方向。

來源

2011-05-31 Tom

我試圖配置一個使用Flowplayer Tools 'scrollable' - 一個基於像素的滑塊的尾聲幻燈片放入我的流體佈局站點時遇到了類似的問題。

我已經通過將尾部滑塊值更改爲％，然後使用額外的jQuery行來強制滑塊的項目面板保持與滑塊容器相同的寬度。

這裏是我使用的設置 - ％，而不是像素的寬度。我沒有在滑塊面板上設置任何寬度;相反，他們正在通過jQuery的是分配的值：

<style type="text/css"> 

    .slider { width:100%; height:200px; overflow:hidden; position:relative } 
    .items { width:2000em; position:absolute } 
    .item { /* do not set any width */ height:200px; overflow:hidden; 
      float:left; display:inline-block } 

</style> 


<div class="slider equal"> 
    <div class="items"> 

     <div class="item equal"></div> 
     <div class="item equal"></div> 
     <div class="item equal"></div> 

    </div> 
</div>

的CSS類「平等」是由這個jQuery的目標：

// Set slider children to width of parent 

if($("div.equal").length){ 
    $.fn.setAllToMaxWidth = function(){ 
     return this.width(Math.min.apply(this, $.map(this , function(e){ return $(e).width() }))); 
    }; 

    $("div.equal").setAllToMaxWidth(); 
};

這個jQuery解決方法是通過吉安娜的阿雯的jQuery Equal Column Heights的適應。

這意味着滑塊佈局完全按照我在頁面加載時所呈現的格式進行渲染，並與我的網格佈局保持一致，而與瀏覽器寬度無關。

儘管存在一些小問題 - 如果您在加載瀏覽器窗口後調整大小，您的佈局可能會超出滑塊項目的寬度，看起來有點奇怪。

來源

2011-07-14 13:50:03 flynnduism

這是舊的，但我有同樣的問題，事實證明，開發人員做出一個新的可以動態調整寬度的尾部滑塊。

其中：LiquidSlider

來源

2012-09-03 00:20:38 Federico

自動調整流體佈局的尾部滑塊的固定寬度

回答

相關問題