寬度的繼承。 Bxslider

存在問題。我的滑塊可能包含不同的圖像，其寬度可高達1256px。幻燈片 - 約4. 滑塊下有一個塊，其寬度應等於活動圖像的寬度。如何做得更好？寬度的繼承。 Bxslider

mode: fade

我嘗試這樣做：

if ($ ('. carousel. bx-wrapper. item img'). css ('display') == 'block') { 
var widthparent = $ ('. carousel. bx-wrapper. item img'). width(); 
widthparent = widthparent + 'px'; 
var child = $ ('. subscribe'); 
child.width (widthparent); 
}

但是這個解決方案是壞的。這裏寬度從第一個圖像繼承。

它的工作原理：

$('.carousel .list').bxSlider({ 
mode: 'fade', 

onSlideBefore: function($slideElement, oldIndex, newIndex) { 
    var blockWidth = $slideElement.width(); 
    $('.subscribe').css('width', blockWidth); 
} 
});

但是，在塊「.carousel」寬度確立了「最大寬度」：「1256px」，每.item = 1256px。

這是需要的寬度取自img，而不是.item。

例如，在第二種情況下，「。訂閱」必須等於1200px。

<div class="carousel"> 
    <div class="bx-wrapper" style="max-width: 100%;"> 
    <div class="bx-viewport" style="width: 100%; overflow: hidden; position: relative; height: 508px;"> 
     <ul class="list" style="width: auto; position: relative;"> 

     <li class="item" style="float: none; list-style: none outside none; position: absolute; display: none; width: 1256px; z-index: 0;"> 
      <a class="link" href=""> 
      <img alt="" src="media/uploads/slide-1.jpg"> // width = 1000px 
      </a> 
     </li> 

     <li class="item" style="float: none; list-style: none outside none; position: absolute; display: none; width: 1256px; z-index: 0;"> 
      <a class="link" href=""> 
      <img alt="" src="media/uploads/slide-2.jpg"> // width = 1200px 
      </a> 
     </li> 

     <li class="item" style="float: none; list-style: none outside none; position: absolute; display: none; width: 1256px; z-index: 0;"> 
      <a class="link" href=""> 
      <img alt="" src="media/uploads/slide-3.jpg"> // width = 900px 
      </a> 
     </li> 

     ....

來源

2014-03-27 user3468894

沒有代碼示例來處理，這是我最好的選擇。在您的滑塊調用內部，有一個名爲onSlideBefore的函數，它可以幫助您嘗試做什麼。

$('.bx').bxSlider({ 
    onSlideBefore: function($el, old, new) { 
     var blockWidth = $el.eq(new).width(); 
     $('.subscribe').css('width', blockWidth); 
    } 
});

沒有任何代碼可以玩，我不是100％確定的，但它應該讓你走上正軌。

來源

2014-03-27 14:13:13 Chad

寬度的繼承。 Bxslider

回答

相關問題