基於圖像實際寬度的響應div

我剛剛帶來了一個jQuery滑塊控件，它表示它是響應式的，但在演示中它是響應式的，我只是不知道如何或什麼使它響應，我複製了代碼和它只是以固定的寬度坐在我的頁面中。基於圖像實際寬度的響應div

所以我唯一能解決這個問題的方法是獲得#seven_container的父元素寬度，並將其用作window.resize的指南，並更改控件的寬度和高度屬性。 .seven_container可能需要另一個家長的div添加和刪除內容

var tb=$(".seven_container").superseven({ 
    width:723, 
    height:425 
    });

有誰知道如何使用圖像的實際寬度和計算$的縱橫比（「 seven_container」）母公司

他們jQuery是如下

var tb=$(".seven_container").superseven({ 
    width:723, 
    height:425, 
    autoplay:true, 
    interval:5, 
    fullwidth:false, 
    responsive:true, 
    progressbar:true, 
    swipe:true, 
    keyboard:false, 
    scrollmode:false, 
    animation:0, 
    navtype:0, 
    repeat_mode:true, 
    skin:'default', 
    lightbox:true, 
    pause_on_hover:true   
});

，這裏是標記

<div class="seven_container"> 
    <div id="seven_viewport"> 
     <div class="seven_slider"> 
      <div class="seven_slide" image-src="images/vivo_slider/make_me_over_package.png"></div> 
      <div class="seven_slide" image-src="images/vivo_slider/regrowth_color_package.png"></div> 
      <div class="seven_slide" image-src="images/vivo_slider/global_color_package.png"></div> 
      <div class="seven_slide" image-src="images/vivo_slider/half_head_foils_package.png"></div> 
      <div class="seven_slide" image-src="images/vivo_slider/balayage_color_package.png"></div> 
      <div class="seven_slide" image-src="images/vivo_slider/highlights_color_package.png"></div> 
      <div class="seven_slide" image-src="images/vivo_slider/full_heads_foil_package.png"></div> 
      <div class="seven_slide" image-src="images/vivo_slider/new_client_hair_offer_package.png"></div> 
     </div> 
    </div> 
    <a id="left_btn" class="seven_nav">Previous Slide</a> 
    <a id="right_btn" class="seven_nav right_btn">Next Slide</a> 
</div>

來源

2014-01-27 ONYX

是的我試過了，它使用它的默認設置。 – ONYX

我有點困惑。滑塊是否在演示中響應，但不在您的網站上？至於固定寬度，我認爲它是容器的最大寬度，直到窗口到達邊界，然後切換到百分比寬度。 – harrypujols

僅作爲測試。請嘗試使用此Javascript代替。

$(document).ready(function(){ 
var tb=$(".seven_container").superseven({ 
    width:774, 
    height:436, 
    caption_animation: 2, 
     fullwidth:true, 
     animation:0, 
     autoplay:true, 
     interval:3, 
     progressbar:true, 
     progressbartype:"linear", 
     bullet:true, 
     thumbnail:false, 
     repeat_mode:true, 
     responsive:true, 
     swipe:true, 
     keyboard:true, 
     skin:"clean", 
     lightbox:true 
    }); 
});

來源

2014-01-28 01:55:20

基於圖像實際寬度的響應div

回答

相關問題